/* CSS Document */
html, body { padding:0; margin:0; width: 100%; }
head { padding:0; margin:0; }
/*
* Font: Inter, self-hosted under assets/fonts/inter (SIL Open Font
* License, see LICENSE.txt there). Deliberately not from Google Fonts -
* that would send the IP address to Google on every request.
* Split by character set: the browser only loads what the page needs
* (Polish latin-ext, Russian cyrillic).
*/
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(../fonts/inter/inter-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(../fonts/inter/inter-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(../fonts/inter/inter-cyrillic.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root { --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* Accent for buttons and highlights, derived from the background colour the
player picks (--body-bg, see prefs.js): its hue at a fixed perceived
lightness (OKLCH), so white text has the same contrast on every colour.
Chroma follows the background but is capped - black and grey stay grey,
strong colours do not get garish. For the default #003333 this is close
to the former teal #128a84, which remains the fallback where relative
colours are not supported. */
:root {
--accent: #128a84;
--accent-hover: #17a69f;
--accent-soft: rgba(18,138,132,0.12);
--accent-softer: rgba(18,138,132,0.16);
}
@supports (color: oklch(from red l c h)) {
:root {
--accent: oklch(from var(--body-bg, #003333) 0.54 min(calc(c * 3), 0.11) h);
--accent-hover: oklch(from var(--body-bg, #003333) 0.61 min(calc(c * 3), 0.11) h);
--accent-soft: oklch(from var(--body-bg, #003333) 0.54 min(calc(c * 3), 0.11) h / 0.12);
--accent-softer: oklch(from var(--body-bg, #003333) 0.54 min(calc(c * 3), 0.11) h / 0.16);
}
}
/* Buttons and nav links fade between their colours on hover */
#say_s, .btn, .pager button, .ajax-field button, .cards-set,
.data-table th button, .top-nav a, .lang-switch a {
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body,div { font-family: var(--font); font-size:13px; line-height:1.5; }
/* The playing field positions texts pixel-exact - keep the old line height there.
Broad defaults for everything inside an ID use :where(), which gives them
the weight of a plain element selector: a class rule for a single element
(e.g. .mp_game *) then wins, as it would anywhere else. A plain #id div
outranked every class rule below it. */
#game_container, :where(#game_container) div { line-height: normal; }
body { background-color: var(--body-bg, #003333); background-image:url(../img/bg.png); background-attachment:fixed; background-position: left top; color:#FFFFFF; min-width: 660px; }
img { border:none; }
a { text-decoration:underline; color:#FFFFFF; }
a:hover { text-decoration:none; }
h1 { font-size:20px; font-weight:700; margin-top:10px; margin-bottom:10px; text-align: center; }
h2 { font-size:16px; margin-top:10px; margin-bottom:10px; }
hr { border:none; border-top:1px solid rgba(255,255,255,0.25); height:0; padding:0px; }
#top {
position: relative;
/* slightly transparent, the wallpaper shows through behind a blur */
background-color: rgba(11,42,42,0.6);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
color: #FFFFFF;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
#top .container { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; width: auto; max-width: 760px; padding: 0 16px; box-sizing: border-box; }
#title {
display: inline-flex; align-items: center; gap: 6px; height: 40px;
font-family: var(--font); font-size: 25px; font-weight: 700; letter-spacing: .3px; line-height: 1;
color: #FFFFFF; text-decoration: none; z-index: 1;
}
#title::before { content: ""; width: 38px; height: 40px; background: url(../img/logo.svg) no-repeat center / 38px 40px; }
#title:hover { color: #cfe7e5; }
/* Language switcher in the header bar - codes instead of flags */
.lang-switch { display: flex; gap: 2px; margin-left: auto; }
.lang-switch a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 13px;
font-weight: 600;
letter-spacing: .5px;
padding: 5px 7px;
border-radius: 6px;
}
.lang-switch a:hover { color: #FFFFFF; background-color: rgba(255,255,255,0.08); }
.lang-switch a.active { color: #FFFFFF; background-color: rgba(255,255,255,0.14); }
/* A player's language in the multiplayer lists: code instead of flag.
The column durak_user.lang arrives as a class, e.g. "lang ru". */
.lang {
/* Centred with flex, not line-height: a 17px line around the 9px text
would stick out of the box and give #mp_played a scrollbar */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
/* As high as the level box next to it */
height: 17px;
line-height: 1;
padding: 0 3px;
border-radius: 3px;
background-color: rgba(14,61,61,0.12);
color: #0e3d3d;
font-size: 9px;
font-weight: 700;
text-align: center;
letter-spacing: .3px;
box-sizing: border-box;
}
.lang.de::after { content: "DE"; }
.lang.ru::after { content: "RU"; }
.lang.en::after { content: "EN"; }
.lang.pl::after { content: "PL"; }
/* Country code on purpose, "UK" would read like the United Kingdom */
.lang.uk::after { content: "UA"; }
.lang:not(.de):not(.ru):not(.en):not(.pl):not(.uk) { display: none; }
.link {
cursor: pointer;
}
.link:hover {
text-decoration: underline;
}
.link.join {
color: #FF0000;
font-weight: bold;
}
p { margin-top:10px; margin-bottom:10px; }
#container { position:relative; width: 610px; }
.container { position:relative; width: 610px; min-width: 610px; margin: 0 auto; }
#ad { position:relative; text-align:center; padding:5px; }
#ad a{ color:#FFFFFF; }
#ad a:hover { text-decoration:underline; }
/* iframes (ads, consent) without the browser's default border */
iframe { border: 0; }
#game_container { position:relative; left:-25px; width:660px; height:460px; color:#EEEEEE; z-index:5; }
/* Frame of the table, 10px inside the box like the former image bg_.png */
#game_container::before {
content: ""; position: absolute; inset: 10px;
border: 1px solid rgba(51,51,51,0.62); border-radius: 11px;
background: linear-gradient(to right, rgba(255,255,255,0.26), rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.26)) padding-box;
box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(251,251,251,0.8), inset 0 0 4px 2px rgba(0,0,0,0.1);
}
:where(#game_container) div { font-family: var(--font); font-size:11px; }
:where(#game_container) a { text-decoration:none; }
:where(#game_container) a:hover { text-decoration:underline; }
#durak { position:absolute; top:20px; left:10px; width:640px; height:400px; z-index:1; }
/* Playing surface, former image bg_1.png */
#durak::before {
content: ""; position: absolute; inset: 10px; z-index: -1;
border: 1px solid rgba(67,84,85,0.75); border-radius: 10px;
background: linear-gradient(to right, rgba(202,249,255,0.51), rgba(236,254,255,0.75) 50%, rgba(202,249,255,0.51)) padding-box;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(240,250,251,0.7), inset 0 0 4px 2px rgba(0,40,45,0.1);
}
:where(#durak) div { font-family: var(--font); font-size:12px; }
#durak_m { position:absolute; left:10px; top:120px; height:160px; width:620px; }
/* Table area in the middle, former image d_m.png */
#durak_m::before {
content: ""; position: absolute; inset: 10px;
border: 1px solid rgba(60,60,60,0.65); border-radius: 7px;
background-color: rgba(255,255,255,0.3); background-clip: padding-box;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(248,248,248,0.62), inset 0 0 4px 2px rgba(0,0,0,0.1);
}
#durak_copy { position:absolute; left:15px; bottom:15px; width:65px; height:39px; background-image:url(../img/durak_ir.png); }
#con_c_c { position:absolute; left:22px; top:22px; }
#con_c_w { position:absolute; left:28px; top:137px; height:126px; z-index:1; }
/* Above #durak_m, which comes later and reaches 2px over the hand: a raised
card would otherwise slide under the table area and its shadow */
#con_c_h { position:absolute; left:22px; top:282px; z-index:2; }
#con_c_r { position:absolute; left:502px; top:137px; z-index:2; }
/* Views above the card table: the box itself is the playing surface (same
look as #durak::before), so background and frame stay put while the
content scrolls and is clipped at the rounded inner edge */
#loaded {
position:absolute; display:none; top:30px; left:20px; width:620px; height:380px;
box-sizing:border-box; padding:5px 9px; overflow-y:auto;
border: 1px solid rgba(67,84,85,0.75); border-radius: 10px;
background: linear-gradient(to right, rgba(202,249,255,0.51), rgba(236,254,255,0.75) 50%, rgba(202,249,255,0.51)) padding-box;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(240,250,251,0.7), inset 0 0 4px 2px rgba(0,40,45,0.1);
color:#1c2f2f; text-align:left; font-family: var(--font); font-size:12px; line-height:1.45;
}
/* Loading indicator, formerly loading.gif */
#loading {
position:absolute; display:none; top:212px; left:316px; width:28px; height:28px; z-index:50;
box-sizing: border-box; border: 3px solid rgba(14,61,61,0.2); border-top-color: var(--accent);
border-radius: 50%; animation: durak-spin .8s linear infinite;
}
@keyframes durak-spin { to { transform: rotate(360deg); } }
#menu_l { position:absolute; left:30px; top:14px; z-index:5; }
:where(#menu_l) * { font-family: var(--font); font-size:11px; color:#FFFFFF; font-weight:bold; }
#menu_r { position:absolute; right:30px; top:14px; z-index:5; display:none; }
:where(#menu_r) * { font-family: var(--font); font-size:11px; color:#FFFFFF; }
/* Menu above the card table: buttons styled as links (see data-ajax in
function.js - deliberately no href) */
#menu_l button, #menu_r button {
background: none; border: 0; padding: 0; margin: 0;
font: inherit; font-weight: bold; color: inherit; cursor: pointer;
}
#menu_l button:hover, #menu_r button:hover, #menu_l button.active { text-decoration: underline; }
/* Card sound on/off: round button after the menu, speaker with waves when
on, crossed out when off (cardSound in function.js) */
/* Sound on/off: round, in the top right corner of the playing surface,
where neither game puts cards. Inside #durak (cardSound.mount() in
function.js), so a view that hides the table hides it as well; until
then (lobby) it is not shown. Half transparent so it does not draw the
eye, full on hover; above the cards and the room panel. */
.sound-toggle { display: none; }
#durak > .sound-toggle {
position: absolute; top: 18px; right: 18px; z-index: 200;
display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
border: 0; border-radius: 50%; background-color: var(--accent); opacity: .7;
box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer;
transition: opacity .15s ease, background-color .15s ease;
}
#durak > .sound-toggle:hover, #durak > .sound-toggle:focus-visible { opacity: 1; background-color: var(--accent-hover); }
/* Its tooltip ends at the right edge of the button instead of running past
the edge of the table */
.sound-toggle[data-tooltip]::after { left: auto; right: -4px; width: max-content; transform: translate(0, -4px); }
.sound-toggle[data-tooltip]:hover::after, .sound-toggle[data-tooltip]:focus-visible::after { transform: translate(0, 0); }
.sound-toggle svg { width: 15px; height: 15px; overflow: visible; }
.sound-toggle .sound-body { fill: #FFFFFF; }
.sound-toggle .sound-waves, .sound-toggle .sound-cross { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; }
.sound-toggle[aria-pressed="true"] .sound-cross, .sound-toggle[aria-pressed="false"] .sound-waves { display: none; }
/* Close link of the views: label like the menu on the left, plus a
larger x that is not underlined */
#menu_r .view-close { display: inline-flex; align-items: center; gap: 4px; margin-top: -3px; }
/* The x is drawn with two bars so it turns around its exact centre. Whole
pixel sizes only: with half pixels the x is rounded differently with and
without a transform and jumps by a pixel after the spin. The page above
can still put it on a half pixel, so it always gets its own layer: then
it is rounded the same at rest, while spinning and afterwards. */
#menu_r .view-close .x { position: relative; width: 10px; height: 10px; will-change: transform; }
#menu_r .view-close .x::before, #menu_r .view-close .x::after {
content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 2px;
border-radius: 1px; background-color: #FFFFFF; transform: rotate(45deg);
}
#menu_r .view-close .x::after { transform: rotate(-45deg); }
#menu_r .view-close:hover { text-decoration: none; }
#menu_r .view-close:hover span:first-child { text-decoration: underline; }
/* On hover the x waits a moment, winds back, then spins three times while
slowing down and springs back into place. It ends on exactly three turns
and keeps no transform afterwards (no fill-mode forwards), so at rest it
is drawn the same with and without hover. */
#menu_r .view-close:hover .x, #menu_r .view-close:focus-visible .x { animation: view-close-spin 2.2s .25s; }
@keyframes view-close-spin {
0% { transform: rotate(0deg); animation-timing-function: ease-out; }
10% { transform: rotate(-35deg); animation-timing-function: cubic-bezier(.15, .75, .25, 1); }
88% { transform: rotate(1095deg); animation-timing-function: ease-in-out; }
100% { transform: rotate(1080deg); }
}
@media (prefers-reduced-motion: reduce) {
#menu_r .view-close:hover .x, #menu_r .view-close:focus-visible .x { animation: none; }
}
#online { position:absolute; top:-2px; right:20px; color:#FFFFFF; }
/* Tab with the colour bar below the table, formerly c_bar_l/m/r.png:
gradient, a light and a dark line at the bottom, shadow below */
#ch_color { position:relative; display: inline-block; margin-top:-11px; height:25px; z-index:10; background-image: linear-gradient(to bottom, rgba(245,245,245,0.58) 0.5px, rgba(132,132,132,0.45) 14.5px, rgba(150,150,150,0.49) 15px 16px, rgba(156,158,158,0.88) 16px 17px, rgba(50,64,64,0.84) 17px 18px, rgba(0,0,0,0.16) 18.5px, rgba(0,0,0,0.03) 21.5px, transparent 22px); }
/* Slanted ends: a face skewed by 45deg, so its left border runs along the
slant and turns round into the bottom lines (rounded corner) like in the
former images; its shadow follows the shape. It reaches under the bar
and is clipped to the 25px end piece. The right end is the left one
mirrored. */
#c_bar_l, #c_bar_r { position:absolute; width:25px; height:25px; top:0px; z-index:10; overflow:hidden; }
#c_bar_l { left:-25px; }
#c_bar_r { right:-25px; transform: scaleX(-1); }
#c_bar_l::before, #c_bar_r::before {
content: ""; position: absolute; left: 5px; top: 0; width: 40px; height: 17px;
transform: skewX(45deg); transform-origin: 0 0;
border-left: 1px solid rgba(47,61,61,0.72); border-bottom: 1px solid rgba(50,64,64,0.84);
border-bottom-left-radius: 4px;
background: linear-gradient(to bottom, rgba(245,245,245,0.58) 0.5px, rgba(132,132,132,0.45) 14.5px, rgba(150,150,150,0.49) 15px) padding-box;
box-shadow: inset 1px 0 0 rgba(110,120,120,0.84), inset 2px 0 0 rgba(245,245,245,0.9), inset 0 -1px 0 rgba(156,158,158,0.88),
0 0 5px rgba(0,0,0,0.4);
}
/* Colour swatches: one element each, the shading lies over the colour and
the white border (formerly color.png / colorh.png). Gradients cannot be
faded, so both lights are layers: ::before lit from the top, ::after lit
from the bottom plus a streak of light. On hover the swatch grows a
little, the layers cross-fade and the streak runs across once. */
.ch_color {
position:relative; width:10px; height:10px; float:left; margin:2px; border:1px solid #FFFFFF; cursor:pointer;
transition: transform .25s cubic-bezier(.3, 1.8, .5, 1);
}
.ch_color:hover { transform: scale(1.25); z-index: 1; }
.ch_color::before, .ch_color::after {
content: ""; position: absolute; inset: -1px; pointer-events: none;
transition: opacity .2s ease;
}
.ch_color::before { background-image: radial-gradient(circle at 6.5px 0, transparent 3.5px, rgba(0,0,0,0.5) 12px); }
.ch_color::after {
opacity: 0;
background-image:
linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.8) 50%, transparent 62%),
radial-gradient(circle at 6.5px 12px, transparent 3.5px, rgba(0,0,0,0.5) 12px);
background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; background-position: 100% 0, 0 0;
}
.ch_color:hover::before { opacity: 0; }
.ch_color:hover::after { opacity: 1; animation: swatch-shine .6s ease-out; }
@keyframes swatch-shine {
from { background-position: 100% 0, 0 0; }
to { background-position: 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.ch_color { transition: none; }
.ch_color:hover { transform: none; }
.ch_color:hover::after { animation: none; }
}
.clear { clear: both; }
.cardback { cursor:pointer; }
#cardback { width:71px; height:96px; display: block; }
#mp_durak { position:absolute; top:58px; left:12px; width:616px; height:322px; z-index:1; overflow:auto; }
/* The page buttons stay at the bottom, also on a last page with few rooms */
.mp-list { display:flex; flex-direction:column; min-height:100%; color:#000000; text-align:center; }
.mp-list .pager { margin-top:auto; padding-top:8px; }
/* No room open: say so, an empty list looks broken */
.mp-empty { margin: auto 0; padding: 0 40px; font-size: 14px; color: #3d5655; }
.mp_game * {
font-size:12px;
line-height: 25px;
}
#player_vs .mp_game {
background-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.5);
color: black;
}
.mp_game {
margin:2px;
white-space: nowrap;
background-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.3);
}
.mp_game a { font-weight:bold; color:#FF0000; }
.mp_game .player {
width: 40%;
float: left;
}
.mp_game .stat {
width: 20%;
float: left;
background-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.25);
}
.mp_game .player .user {
line-height: 15px;
padding: 0 4px;
/* Flag and level always keep their place, a long name is shortened
with an ellipsis instead of pushing them out (narrow screens) */
display: flex;
align-items: center;
}
.mp_game .player.right .user { justify-content: flex-end; }
.mp_game .player .user .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp_game .player .user .lang, .mp_game .player .user .level { flex: none; }
.mp_game .player .user .lang {
vertical-align: middle;
}
.mp_game .player .user .name {
font-weight: bold;
display: inline-block;
vertical-align: middle;
}
.mp_game .player .user .level {
background-color: rgba(255, 255, 255, 0.50);
background: rgba(255, 255, 255, 0.50);
min-width: 25px;
text-align: center;
display: inline-block;
vertical-align: middle;
margin: 4px;
padding: 0 2px;
line-height: 17px;
}
/* Send button of the chat: same height as the chat field next to it, in
the teal of the other buttons, with a paper plane drawn by clip-path */
#say_s {
position:absolute; right:16px; bottom:-20px; width:34px; height:22px; padding:0;
border:0; border-radius:6px; background-color:var(--accent); cursor:pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#say_s:hover, #say_s:focus-visible { background-color:var(--accent-hover); }
#say_s::before {
content: ""; position: absolute; left: 11px; top: 5px; width: 13px; height: 12px;
background-color: #FFFFFF;
clip-path: polygon(0 0, 100% 50%, 0 100%, 18% 50%);
}
#say_w { position:absolute; right:50px; bottom:-28px; width:516px; height:38px; }
/* Chat field, formerly say_w.png */
#say_w::before {
content: ""; position: absolute; inset: 8px; border-radius: 9px;
border: 1px solid rgba(255,255,255,0.87);
background: rgba(255,255,255,0.5) padding-box;
box-shadow: 0 2px 2px rgba(255,255,255,0.2), 0 0 3px 1px rgba(0,0,0,0.18);
}
.say_w { position:absolute; left:13px; top:10px; width:490px; background-color:transparent; border:none; font-family: var(--font); font-size:12px; color:#003333; font-weight:bold; }
/* Focus: the ring goes around the drawn field, not the bare input in it */
.say_w:focus { box-shadow: none; }
#say_w:focus-within::before { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }
#mp_time { position:absolute; top:-22px; left:15px; color:#FFFFFF; }
.durak_copy { position:fixed; left:0px; bottom:3px; width:65px; height:39px; background-image:url(../img/durak_ir.png); }
div#mp_c_left { position:absolute; top:2px; right:3px; font-size:11px; font-weight:bold; }
/* Lobby: create a room, optionally private */
#d_mp_menu {
position:absolute; left:12px; width:616px; top:20px; color:#000000; font-size:12px;
display:flex; align-items:center; justify-content:center; gap:12px;
}
#d_mp_menu a{ color:#000000; font-size:12px; }
#mp_played { position:absolute; top:30px; left:12px; width:616px; height:340px; z-index:1; overflow:auto; }
.gender_0 { }
.gender_1 { color:#0066FF; }
.gender_2 { color:#FF66FF }
#game_container a.active { text-decoration:underline; }
ul.stats {
margin: 0;
padding: 0;
text-align: justify;
}
ul.stats li {
display: inline-block;
zoom: 1;
*display: inline;
width: 33%;
text-align: center;
}
.premium {
display: inline-block;
zoom: 1;
*display: inline;
width: 13px;
height: 13px;
background-image:url(../img/icon/premium.png);
}
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
/**
* Game
*/
.ztrump {
position: absolute;
top: 25px;
left: 30px;
z-index: 53;
height: 50px;
width: 50px;
display: none;
background-image: url(../img/game/trump/ztrump.png);
}
.card {
position: absolute;
top: 0px;
left: 0px;
background-image: url(../img/game/cards/modern.png?v=1);
display: block;
width: 71px;
height: 96px;
border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
-webkit-border-radius: 5px 5px;
-webkit-box-shadow: -1px 0px 2px #2C2C2C;
-moz-box-shadow: -1px 0px 2px #2C2C2C;
box-shadow: -1px 0px 2px #2C2C2C;
display: none;
}
/* Card set chosen in the "Cards" view, see setCardSet() in function.js */
:root[data-card-set="big"] .card { background-image: url(../img/game/cards/big.png?v=1); }
:root[data-card-set="classic"] .card { background-image: url(../img/game/cards/classic.png?v=1); }
.pointer {
cursor: pointer;
}
/* Hand cards rise by 10px on hover (formerly a setInterval in sp.js/mp.js).
The invisible strip below keeps the pointer on the raised card, otherwise
it would drop again under the pointer at its lower edge and flicker. */
/* Raised card: it springs up softly past the 10px and settles (one
overshoot, about 13px), with a deeper shadow. Going down again is calm.
The invisible strip covers the highest point, so the pointer never
leaves the card. */
#con_c_h .card { transition: transform .15s ease-out, box-shadow .15s ease-out; }
#con_c_h .card:hover {
transform: translateY(-10px);
box-shadow: -1px 8px 12px rgba(0,0,0,0.45);
transition: transform .45s cubic-bezier(.3, 2.2, .5, 1), box-shadow .2s ease-out;
}
#con_c_h .card:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 15px; }
@media (prefers-reduced-motion: reduce) {
#con_c_h .card:hover { transition: box-shadow .2s ease-out; }
}
#con_c_h.idle .card:hover { transform: none; box-shadow: -1px 0px 2px #2C2C2C; }
.back {
background-image: url(../img/game/deck/deck.png);
background-position: center center;
display: none;
}
/* Cards on the move (cardFly in function.js): stand-ins above everything
on the table. The layer is a 100px box so the script can measure how
much the table is zoomed on phones. */
.card-fly { position: absolute; left: 0; top: 0; width: 100px; height: 100px; pointer-events: none; z-index: 300; }
.card-fly-item { position: absolute; width: 71px; height: 96px; will-change: transform; }
.card-fly-item .card { display: block; }
/* Take / done button next to the deck, in the teal of the other buttons.
sp.js/mp.js set width 110px and height 18px inline; with the padding
that makes 24px. content-box because buttons default to border-box. */
.btn {
display: none;
box-sizing: content-box;
width: 110px;
height: 18px;
padding: 3px 0;
border: 0;
border-radius: 6px;
background-color: var(--accent);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
color: #FFFFFF;
font-family: var(--font);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 18px;
cursor: pointer;
text-align: center;
}
.btn:hover, .btn:focus-visible { background-color: var(--accent-hover); }
input, select {
background-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.5);
border: 0 none;
padding: 2px;
}
/* Focus: never the browser's black frame. Fields show a soft ring in the
accent colour while focused (like the forms in page.css); buttons and
links only when reached with the keyboard (:focus-visible) - a mouse
click shows nothing. :where() keeps these at the weight of an element
selector, so the own rules of a control (e.g. .btn, the chat field)
still win. */
:where(button, a, input, select, textarea, [tabindex]):focus { outline: none; }
:where(input, select, textarea):focus { box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-softer); }
:where(button, a, [tabindex]):focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 4px var(--accent); }
select {
padding: 1px;
}
option {
background: #FFFFFF;
}
table {
margin-left: auto;
margin-right: auto;
}
/**
* MP
*/
/* Modal in place of alert() (modal() in function.js), e.g. at the end of a
game. A