/* ============================================================
WapParkas — dizaino sistema v2
„Naktinės mugės" stilius: šilta bilietų-aukso ir koralinė
spalvų pora ant teal/tamsiai mėlyno pagrindo.
TEMOS: palaikomos trys būsenos —
- "auto" (numatyta) - jokio [data-theme] atributo, sprendžia
naršyklės/OS prefers-color-scheme
- "light" -
- "dark" -
Žr. include/header.php (skaito .env nepriklausomą 'wp_theme'
slapuką) ir theme.php (perjungimo endpoint'as).
PASTABA: dauguma žaidimo puslapių (ok*.php, knyga*.php,
memoserv.php ir t.t.) NENAUDOJA CSS klasių - jie tiesiog
spausdina ...
sąrašus. Todėl žemiau esantis
a:has(+ br) triukas yra svarbiausia šio failo dalis: jis
paverčia tuos sąrašus į korteles/mygtukus VISUR, be jokių
PHP pakeitimų.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');
/* ---------- 1. Dizaino tokenai (spalvos, šešėliai, spinduliai) ---------- */
:root{
--ink: #1c2b4a;
--ink-soft: #55648a;
--ink-faint: #8592ae;
--paper: #faf2e3;
--paper-raised:#ffffff;
--paper-line: #e7d9bc;
--gold: #e79a2c;
--gold-deep: #a8690c;
--gold-ink: #402700;
--coral: #e0503a;
--coral-deep: #b83a29;
--teal: #276b5c;
--teal-deep: #164238;
--green: #4c9a2a;
--shadow-sm: 0 1px 2px rgba(28,43,74,.06);
--shadow-md: 0 1px 2px rgba(28,43,74,.05), 0 8px 20px -10px rgba(28,43,74,.28);
--radius-lg: 18px;
--radius-md: 13px;
--radius-sm: 9px;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ink: #f1e8d4;
--ink-soft: #b9ac86;
--ink-faint: #82789f;
--paper: #0f1830;
--paper-raised:#16223e;
--paper-line: #2b3b5e;
--gold: #f0ab45;
--gold-deep: #ffcf85;
--gold-ink: #2a1a00;
--coral: #ff7159;
--coral-deep: #ff9683;
--teal: #4fae95;
--teal-deep: #8fd9c3;
--green: #7fce55;
--shadow-sm: 0 1px 2px rgba(0,0,0,.35);
--shadow-md: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px -12px rgba(0,0,0,.65);
}
}
:root[data-theme="dark"]{
--ink: #f1e8d4;
--ink-soft: #b9ac86;
--ink-faint: #82789f;
--paper: #0f1830;
--paper-raised:#16223e;
--paper-line: #2b3b5e;
--gold: #f0ab45;
--gold-deep: #ffcf85;
--gold-ink: #2a1a00;
--coral: #ff7159;
--coral-deep: #ff9683;
--teal: #4fae95;
--teal-deep: #8fd9c3;
--green: #7fce55;
--shadow-sm: 0 1px 2px rgba(0,0,0,.35);
--shadow-md: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px -12px rgba(0,0,0,.65);
}
/* ---------- 2. Reset / pagrindas ---------- */
*{ box-sizing: border-box; }
body{
background: var(--paper);
color: var(--ink);
margin: 0 auto;
max-width: 620px;
padding: 10px 10px 40px;
font-family: 'Manrope', Verdana, sans-serif;
font-size: 14.5px;
line-height: 1.55;
border: none;
text-align: center;
}
/* Kortelėse (parduotuvės eilutėse, HUD, formose) tekstas geriau skaitosi
kairėje - centruojame tik bendrą turinį (antraštes, sąrašus, pastraipas),
o kortelių/formų vidinį išdėstymą valdo pačių komponentų flex/grid taisyklės. */
.shop-row-body, .status-card > div, form label, .buy-form,
.list-row .body{
text-align: left;
}
/* ---------- 3. Tipografija ---------- */
h1, h2, h3, h4{
font-family: 'Baloo 2', 'Manrope', sans-serif;
font-weight: 700;
color: var(--ink);
line-height: 1.25;
margin: 4px 2px 10px;
}
h3{
font-size: 18px;
padding-bottom: 8px;
border-bottom: 2px solid var(--paper-line);
letter-spacing: .01em;
}
p{ margin: 0 0 10px; }
b, strong{ font-weight: 700; color: var(--ink); }
small{ color: var(--ink-soft); }
u{ text-decoration-color: var(--coral); }
hr{
border: none;
border-top: 1px dashed var(--paper-line);
margin: 14px 2px;
}
font[color]{ font-family: inherit; }
font[color="red"]{ color: var(--coral-deep) !important; }
font[color="white"]{ color: inherit !important; }
font[color="#59ff00"]{ color: var(--green) !important; }
font[color="#ff0000"]{ color: var(--coral-deep) !important; }
/* skaitiniai/statistikos verčiai - tabelinės skaitmenys, kai atsiduria viduje po ':' */
.tabular, .stat-v{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-variant-numeric: tabular-nums;
}
/* ---------- 4. Nuorodos ---------- */
a{
color: var(--teal-deep);
text-decoration: none;
font-weight: 600;
}
a:hover{ color: var(--coral-deep); }
a:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
/* ⭐ Pagrindinis triukas: ...
ir ...
(žaidimo meniu sąrašų šablonas) tampa lytimosioms korteles pritaikytomis
eilutėmis - be jokių PHP pakeitimų. */
a:has(+ br),
b:has(+ br) > a:only-child{
display: block;
background: var(--paper-raised);
border: 1px solid var(--paper-line);
border-radius: var(--radius-md);
padding: 11px 14px;
margin: 0 0 7px;
box-shadow: var(--shadow-sm);
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
a:has(+ br):hover,
b:has(+ br) > a:only-child:hover{
border-color: var(--gold);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
color: var(--ink);
}
b:has(> a:has(+ br)){ font-weight: inherit; } /* neduplikuojam paryškinimo aplink kortelę */
/* Atsijungimo / pavojingos nuorodos - švelnus raudonas akcentas */
a[href="logout.php"]:has(+ br),
a[title="Atsijungti"]:has(+ br){
border-color: color-mix(in srgb, var(--coral) 45%, var(--paper-line));
color: var(--coral-deep);
}
/* ---------- 5. Formos ---------- */
form{ margin: 0 0 10px; }
label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin: 8px 2px 5px; }
input[type=text], input[type=password], input[type=number], input[type=email],
select, textarea{
width: 100%;
font-family: 'Manrope', sans-serif;
font-size: 15px;
padding: 11px 13px;
border: 1.5px solid var(--paper-line);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
margin-bottom: 8px;
max-width: 100%;
min-height: auto;
}
textarea{ min-height: 70px; max-width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus{
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
color: var(--ink);
}
button, input[type=submit], input[type=button], a.btn{
display: inline-block;
font-family: 'Baloo 2', sans-serif;
font-weight: 700;
font-size: 15px;
text-transform: none;
text-shadow: none;
color: var(--gold-ink);
background: var(--gold);
border: none;
border-radius: var(--radius-sm);
padding: 12px 18px;
box-shadow: 0 3px 0 var(--gold-deep);
cursor: pointer;
min-width: 0;
min-height: 0;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, a.btn:hover{
filter: brightness(1.04);
color: var(--gold-ink);
}
button:active, input[type=submit]:active, input[type=button]:active{
transform: translateY(2px);
box-shadow: 0 1px 0 var(--gold-deep);
}
/* pavojingi veiksmai (Griauti, Trinti ir pan. jau žymimi style="color:red" kode) */
button[style*="color: red"], button[style*="color:red"]{
background: var(--coral);
color: #fff;
box-shadow: 0 3px 0 var(--coral-deep);
}
/* ---------- 6. Dar naudojamos "senos" klasės (perpieštos naujai) ---------- */
.head{
background: linear-gradient(135deg, var(--teal-deep), var(--teal));
color: var(--gold);
text-align: center;
text-shadow: none;
padding: 14px;
margin: 2px 2px 8px;
border-radius: var(--radius-md);
font-weight: 700;
}
.up{
background: linear-gradient(135deg, var(--teal-deep), var(--teal));
color: #fdf6e6;
text-align: center;
font-weight: 700;
font-size: 12.5px;
letter-spacing: .03em;
text-transform: uppercase;
padding: 8px;
margin: 10px 2px 0;
border-radius: var(--radius-md) var(--radius-md) 0 0;
border: 1px solid var(--paper-line);
border-bottom: none;
}
.title1, .titlec, .title, .title2{
background: var(--paper-raised);
color: var(--ink);
font-weight: 700;
text-align: center;
padding: 10px;
margin: 8px 2px 0;
border: 1px solid var(--paper-line);
border-bottom: 2px solid var(--gold);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.content, .contents, .meniuc, .menium, .pm{
background: var(--paper-raised);
color: var(--ink);
padding: 14px;
margin: 0 2px 10px;
border: 1px solid var(--paper-line);
border-radius: 0 0 var(--radius-md) var(--radius-md);
box-shadow: var(--shadow-sm);
}
/* kai .content/.contents naudojama be prieš tai einančio .up/.title1 - suapvaliname viską */
.contents:first-child, .meniuc:first-child{ border-radius: var(--radius-md); margin-top: 8px; }
.ax, .pm_ax{
background: color-mix(in srgb, var(--teal) 10%, var(--paper-raised));
border: 1px solid var(--paper-line);
color: var(--ink-soft);
font-size: 12.5px;
padding: 9px 12px;
margin: 6px 2px;
border-radius: var(--radius-sm);
}
.linija{ border-bottom: 1px dashed var(--paper-line); margin: 8px 2px; }
.linija-gr{ border-bottom: 2px solid var(--green); margin: 8px 2px; }
.linija-red{ border-bottom: 2px solid var(--coral); margin: 8px 2px; }
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.error, .alert-error{
background: color-mix(in srgb, var(--coral) 14%, var(--paper-raised));
border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--paper-line));
color: var(--coral-deep);
padding: 12px 14px;
border-radius: var(--radius-md);
margin-bottom: 10px;
font-weight: 600;
}
.done, .alert-success{
background: color-mix(in srgb, var(--green) 14%, var(--paper-raised));
border: 1px solid color-mix(in srgb, var(--green) 40%, var(--paper-line));
color: var(--teal-deep);
padding: 12px 14px;
border-radius: var(--radius-md);
margin-bottom: 10px;
font-weight: 600;
}
/* ---------- 7. Puslapio antraštė (header.php) - logotipas + temos perjungiklis ---------- */
.site-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding: 12px 4px 10px;
}
.site-header .brand{
display:flex;
align-items:center;
gap:9px;
text-decoration:none;
}
.site-header .brand .mark{
width:32px; height:32px;
border-radius:9px;
background:var(--gold);
display:grid; place-items:center;
font-size:17px;
box-shadow:0 2px 0 var(--gold-deep);
flex:none;
}
.site-header .brand .word{
font-family:'Baloo 2',sans-serif;
font-weight:800;
font-size:19px;
color:var(--ink);
letter-spacing:-.01em;
}
.site-header .brand .word span{ color: var(--gold-deep); }
.theme-toggle{
display:flex;
gap:3px;
background: var(--paper-raised);
border:1px solid var(--paper-line);
border-radius: 999px;
padding: 3px;
}
.theme-toggle a{
display:flex;
align-items:center;
justify-content:center;
width:28px; height:28px;
border-radius:999px;
font-size:14px;
text-decoration:none;
color: var(--ink-faint);
}
.theme-toggle a.active{
background: var(--gold);
color: var(--gold-ink);
}
/* Nuolatinė viršutinė juosta (Inbox / Kreditai / Mano meniu) - visuose puslapiuose */
.topbar-persist{
display:flex;
gap:6px;
padding: 0 2px 10px;
border-bottom: 1px solid var(--paper-line);
margin-bottom: 10px;
overflow-x: auto;
}
.topbar-persist a{
flex:1;
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
white-space:nowrap;
background: var(--paper-raised);
border:1px solid var(--paper-line);
border-radius: var(--radius-sm);
padding: 8px 10px;
font-size:12px;
font-weight:700;
color: var(--ink);
text-decoration:none;
}
.topbar-persist a:hover{ border-color: var(--gold); color: var(--ink); }
.topbar-persist .badge{
position:absolute;
top:-6px;
right:-6px;
background: var(--coral);
color:#fff;
font-family:'JetBrains Mono',monospace;
font-size:10px;
font-weight:700;
line-height:1;
border-radius:999px;
padding:3px 5px;
min-width:16px;
text-align:center;
}
/* ---------- 7b. HUD juosta + naršymo tinklelis (pagrindiniam meniu ir pan.) ---------- */
.hud{
display:flex;
gap:8px;
margin: 4px 2px 16px;
}
.hud-chip{
flex:1;
text-align:center;
background: var(--paper-raised);
border:1px solid var(--paper-line);
border-radius: var(--radius-sm);
padding: 8px 6px;
box-shadow: var(--shadow-sm);
}
.hud-chip .v{
display:block;
font-family:'JetBrains Mono',monospace;
font-weight:700;
font-size:15px;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.hud-chip .l{
display:block;
font-size:10px;
text-transform:uppercase;
letter-spacing:.05em;
color: var(--ink-faint);
margin-top:1px;
}
.hud-chip.gold .v{ color: var(--gold-deep); }
.hud-chip.go .v{ color: var(--teal-deep); }
.section-label{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color: var(--ink-faint);
margin: 4px 2px 8px;
}
.nav-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin: 0 0 16px;
}
.nav-card{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
text-align:center;
background: var(--paper-raised);
border:1px solid var(--paper-line);
border-radius: var(--radius-md);
padding: 12px 6px 10px;
box-shadow: var(--shadow-sm);
color: var(--ink);
font-weight:700;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.nav-card:hover{
border-color: var(--gold);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
color: var(--ink);
}
.nav-card .ic{
width:36px; height:36px;
border-radius: 11px;
display:grid;
place-items:center;
font-size:17px;
color:#fff;
}
.nav-card .lbl{ font-size:11.5px; line-height:1.2; }
.nav-card .ic.c-build{background:linear-gradient(135deg,#e79a2c,#a8690c);}
.nav-card .ic.c-worker{background:linear-gradient(135deg,#c9944a,#8f6528);}
.nav-card .ic.c-battle{background:linear-gradient(135deg,#e0503a,#b83a29);}
.nav-card .ic.c-fun{background:linear-gradient(135deg,#e0503a,#e79a2c);}
.nav-card .ic.c-settings{background:linear-gradient(135deg,#55648a,#33406b);}
.nav-card .ic.c-clan{background:linear-gradient(135deg,#276b5c,#164238);}
.nav-card .ic.c-hotel{background:linear-gradient(135deg,#e79a2c,#a8690c);}
.nav-card .ic.c-cafe{background:linear-gradient(135deg,#c9944a,#8f6528);}
.nav-card .ic.c-cinema{background:linear-gradient(135deg,#55648a,#33406b);}
.nav-card .ic.c-circus{background:linear-gradient(135deg,#e0503a,#b83a29);}
.nav-card .ic.c-club{background:linear-gradient(135deg,#8f4fae,#5f2f78);}
.nav-card .ic.c-ride{background:linear-gradient(135deg,#e0503a,#e79a2c);}
.nav-card .ic.c-shop{background:linear-gradient(135deg,#b25fc7,#7d3d8f);}
/* ---------- 7d. Sąrašo eilutė (nariai, žinutės ir pan.) ---------- */
.list-row{
display:flex;
align-items:center;
gap:11px;
background: var(--paper-raised);
border:1px solid var(--paper-line);
border-radius: var(--radius-md);
padding: 10px 13px;
margin-bottom: 7px;
text-decoration:none;
color: var(--ink);
box-shadow: var(--shadow-sm);
transition: transform .12s ease, border-color .12s ease;
}
.list-row:hover{ border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }
.list-row .ic{
width:30px; height:30px;
border-radius:9px;
background: color-mix(in srgb, var(--teal) 14%, var(--paper-raised));
display:grid;
place-items:center;
font-size:14px;
flex:none;
}
.list-row .body{ flex:1; min-width:0; }
.list-row .t1{ font-weight:700; font-size:13.5px; }
.list-row .t2{ font-size:11.5px; color: var(--ink-faint); margin-top:1px; }
.list-row .chev{ color: var(--ink-faint); font-size:14px; flex:none; }
.list-row .val{
font-family:'JetBrains Mono',monospace;
font-weight:700;
font-size:12.5px;
color: var(--teal-deep);
flex:none;
white-space:nowrap;
}
/* ---------- 7e. Pokalbio (chat) valdiklis pagrindiniame meniu ---------- */
.chat-box{
background: var(--paper-raised);
border:1px solid var(--paper-line);
border-radius: var(--radius-md);
padding: 10px 12px;
margin-bottom: 10px;
box-shadow: var(--shadow-sm);
max-height: 260px;
overflow-y: auto;
text-align: left;
}
.chat-msg{
padding: 6px 0;
border-bottom: 1px dashed var(--paper-line);
}
.chat-msg:last-child{ border-bottom: none; }
.chat-msg .meta{
font-size:10.5px;
color: var(--ink-faint);
font-family:'JetBrains Mono',monospace;
}
.chat-msg .who{
font-weight:700;
color: var(--teal-deep);
text-decoration:none;
}
.chat-msg .txt{ font-size:13px; margin-top:1px; word-wrap:break-word; }
.chat-empty{ text-align:center; color: var(--ink-faint); font-size:13px; padding:10px 0; }
.chat-compose{ display:flex; gap:8px; align-items:flex-end; }
.chat-compose textarea{ flex:1; min-height:44px; margin-bottom:0; resize:vertical; }
.chat-compose button{ flex:none; }
/* "Jūsų parkas" statuso kortelė (pastatų meniu ir pan.) */
.status-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
background: linear-gradient(135deg, var(--teal-deep), var(--teal));
color:#fdf6e6;
border-radius: var(--radius-md);
padding: 13px 15px;
margin: 0 0 16px;
box-shadow: var(--shadow-sm);
}
.status-card .lbl{
font-size:11px;
text-transform:uppercase;
letter-spacing:.05em;
opacity:.8;
margin-bottom:3px;
}
.status-card .v{
font-family:'Baloo 2',sans-serif;
font-weight:700;
font-size:16px;
}
.status-card a{
color:#fdf6e6;
background: rgba(255,255,255,.16);
padding:7px 12px;
border-radius: 999px;
font-size:12.5px;
white-space:nowrap;
}
.status-card a:hover{ background: var(--gold); color: var(--gold-ink); }
/* ---------- 7c. Parduotuvės sąrašas (atrakcionai, hotel, kavinės ir pan.) ---------- */
.shop-list{ margin: 0 0 16px; }
.shop-row{
display:flex;
align-items:center;
gap:11px;
background: var(--paper-raised);
border:1px solid var(--paper-line);
border-radius: var(--radius-md);
padding: 10px 12px;
margin-bottom: 7px;
box-shadow: var(--shadow-sm);
}
.shop-row-icon{
width:34px; height:34px;
border-radius:10px;
background: color-mix(in srgb, var(--gold) 16%, var(--paper-raised));
display:grid;
place-items:center;
font-size:16px;
flex:none;
}
.shop-row-body{ flex:1; min-width:0; }
.shop-row-name{ font-weight:700; font-size:13.5px; }
.shop-row-meta{
font-family:'JetBrains Mono',monospace;
font-size:11px;
color: var(--ink-faint);
margin-top:3px;
}
.shop-row-bar{
height:5px;
border-radius: 4px;
background: var(--paper-line);
margin-top:5px;
overflow:hidden;
}
.shop-row-bar-fill{
height:100%;
background: linear-gradient(90deg, var(--gold), var(--coral));
border-radius: 4px;
}
.shop-row-price{
flex:none;
font-family:'JetBrains Mono',monospace;
font-weight:700;
font-size:12.5px;
color: var(--teal-deep);
text-align:right;
white-space:nowrap;
}
/* Admin koregavimo eilutė - tas pats shop-row, bet vietoj kainos yra
nedidelis skaičiaus laukelis pokyčiui (+/-) įvesti */
.shop-row-delta{ flex:none; width:76px; }
.shop-row-delta input{
width:100%;
margin-bottom:0;
padding:8px 6px;
text-align:center;
font-family:'JetBrains Mono',monospace;
font-weight:700;
}
/* pirkimo forma po sąrašu - vientisa juosta, ne atskiri laukai */
.buy-form{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:flex-end;
background: var(--paper-raised);
border:1px solid var(--paper-line);
border-radius: var(--radius-md);
padding: 12px;
margin: 0 0 16px;
box-shadow: var(--shadow-sm);
}
.buy-form > div{ flex:1; min-width:140px; }
.buy-form label{ margin: 0 0 5px; }
.buy-form select, .buy-form input{ margin-bottom:0; }
.buy-form button{ flex:none; }
/* ---------- 8. Smulkmenos ---------- */
::selection{ background: var(--gold); color: var(--gold-ink); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: var(--paper-line); border-radius: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
@media (max-width: 420px){
body{ font-size: 14px; padding: 8px 8px 32px; }
h3{ font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce){
a:has(+ br), b:has(+ br) > a:only-child{ transition: none; }
}
/* ---------- 9. Slapukų (cookies) juosta ---------- */
.cookie-banner{
position: fixed;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 1000;
max-width: 600px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
background: var(--paper-raised);
border: 1px solid var(--paper-line);
border-radius: var(--radius-md);
padding: 12px 14px;
box-shadow: var(--shadow-md);
}
.cookie-banner p{
flex: 1;
min-width: 200px;
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft);
text-align: left;
}
.cookie-banner .btn{ flex: none; padding: 10px 16px; font-size: 13px; }