/* --- FONTS (#91) ---
Cinzel and Inter used to arrive from fonts.googleapis.com — the only network
dependency the game had. Offline, under file:// and inside the native WebView it
silently fell back to serif, so the app looked different from the site. The woff2
subsets now sit in fonts/ (both SIL OFL) and the @font-face blocks below are Google's
own, URLs rewritten: latin + latin-ext, because Turkish needs latin-ext. The
unicode-range split is kept, so a latin-only page never fetches the ext file. */
/* latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cinzel-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;
}
/* latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cinzel-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;
}
/* latin-ext */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/cinzel-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;
}
/* latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/cinzel-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;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/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;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/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;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/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;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/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;
}
/* Persian (Vazirmatn) */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}
:root {
--primary: #d4af37; /* Lüks Altın */
--primary-hover: #f5d76e;
--bg-dark: #0a0a0e;
/* 1.32.0 soft pass: the cool slate neutrals (blue-grey text and panels) moved a few
degrees toward warm parchment so they sit with the gold instead of against it; red
and green softened a little. Gold, layout and contrast are unchanged. */
--panel-bg: rgba(20, 18, 16, 0.72);
--panel-border: rgba(212, 175, 55, 0.3);
--text-color: #ece6da;
--text-muted: #a8a194;
--danger: #e0605a;
--success: #4cc38a;
/* Corner radii from one place (1.32.0) — every panel, button, chip and bar reads one of
these; the in-JS inline styles use the same variables. */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--r-xl: 22px;
--r-pill: 999px;
--ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
/* Açıklama puntoları tek yerden (#73). Arayüzün her yerine serpilmiş inline
0.68–0.92rem değerleri bu üç değişkene bağlandı; taban yükseldi ve artık
tek satır değiştirerek büyütülüyor. Ayarlardaki yazı ölçeği kök puntoyu
çarptığı için ikisi birlikte çalışır. */
--fs-xs: 0.82rem;
--fs-sm: 0.92rem;
--fs-md: 1rem;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* iOS'ta `100vh` araç çubukları GİZLİYKENKİ yüksekliktir (ölçüldü: iPhone'da
ekran 844, görünen pencere 669). Yani sayfa görünenden ~80 px uzun kalıyor ve
telefon "kendi kendine" kayıyordu. `dvh` görünen yüksekliği verir; `vh` satırı
desteklemeyen tarayıcı için yedek olarak önce durur. `overscroll-behavior`
lastik bandı da keser. */
html { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
font-family: 'Inter', 'Vazirmatn', sans-serif;
background-color: var(--bg-dark);
color: var(--text-color);
height: 100vh;
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
overscroll-behavior: none;
}
h1, h2, h3 {
font-family: 'Cinzel', 'Vazirmatn', serif;
color: var(--primary);
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.glass-panel {
background: var(--panel-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--panel-border);
border-radius: var(--r-lg);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
}
#game-container {
width: 100vw;
height: 100vh;
height: 100dvh;
position: relative;
}
.screen {
position: absolute;
/* iOS draws under the notch (viewport-fit=cover + black-translucent status bar), so the
HUD sat beneath the clock and the battery. The inset used to live on #game-container
as padding, on the reasoning that a screen is positioned against its padding box —
but that box's origin is the *border* edge, so padding never moves an absolutely
positioned child at all. Measured: 59px of padding there shifts #top-bar by 0px; the
same 59px here shifts it by 59. That is why the notch survived both 0.89 and 0.93
(#95). The bottom stays 0: --tui-lift already adds safe-area-inset-bottom, and
counting it twice would lift the touch controls off the screen. */
inset: var(--safe-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
display: none;
flex-direction: column;
}
/* --safe-top: the notch plus a 6px breath under it, so the top bar doesn't sit flush against
the status bar; min() keeps a flat screen (inset 0) at 0. A shell that draws under the
status bar while reporting a 0 inset cannot be told apart from a flat screen in CSS, so
index.html measures it and only then adds .native-shell: 59px is the tallest iPhone
status bar (Dynamic Island), plus the same 6px. */
:root { --safe-top: calc(env(safe-area-inset-top) + min(6px, env(safe-area-inset-top))); }
.native-shell { --safe-top: 65px; }
.screen.active { display: flex; }
/* --- START SCREEN REDESIGN --- */
#start-screen {
/* `safe center` centers while there is room and falls back to flex-start when there
is not — plain `center` overflows *both* ends of a scroll container, so on a short
window the title was cut off above and unreachable (#94). */
justify-content: safe center;
align-items: center;
overflow-y: auto;
/* the title's glow (::before, 130% of the title) and the march spill past a phone's edge:
with overflow-y auto, overflow-x computes to auto too, and the whole screen slid sideways */
overflow-x: hidden;
overscroll-behavior: contain;
padding-block: 1.5rem;
/* the picture runs up under the notch instead of stopping in a seam below it */
top: 0; padding-top: calc(1.5rem + var(--safe-top));
background: radial-gradient(circle at center, rgba(15,20,25,0.2) 0%, rgba(5,5,8,0.9) 100%), url('bg_hdr.jpg');
background-size: cover;
background-position: center;
}
#start-screen .title-container {
text-align: center;
margin-bottom: 4rem;
position: relative;
}
#start-screen .title-container::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 130%;
height: 40px;
background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.25) 0%, transparent 70%);
filter: blur(15px);
z-index: 0;
pointer-events: none;
}
#start-screen h1 {
position: relative;
z-index: 1;
font-size: 8.5rem;
font-family: 'Cinzel', 'Vazirmatn', serif;
background: linear-gradient(to bottom, #fffdf2 0%, #ffe066 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0px 0px 12px rgba(255, 230, 0, 0.5)) drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.9));
margin-bottom: 0.5rem;
letter-spacing: 6px;
line-height: 1;
}
.ornament {
width: 600px;
height: 40px;
margin: 20px auto;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
opacity: 0.9;
}
#start-screen p {
font-size: 1.5rem;
color: #e2e8f0;
letter-spacing: 2px;
text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
#start-screen .form-group {
background: rgba(10, 10, 15, 0.6);
padding: 2rem;
border-radius: var(--r-xl);
border: 1px solid rgba(212, 175, 55, 0.2);
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
}
/* The start screen's action row. It used to be absolutely positioned at the bottom of
the screen, which parked it on top of the in-flow language row the moment a fifth
button joined (#93). In the normal flow it just stacks and wraps. */
.start-actions {
display: flex; flex-wrap: wrap;
gap: 1rem; justify-content: center;
width: 100%; margin-top: 1.8rem;
}
#start-screen .form-group label {
display: block; margin-bottom: 0.8rem; font-size: 1.1rem; color: #fff; font-weight: bold; text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.input-container {
position: relative;
display: inline-block;
filter: drop-shadow(2px 0px 0px #b8912a) drop-shadow(-2px 0px 0px #b8912a) drop-shadow(0px 2px 0px #b8912a) drop-shadow(0px -2px 0px #b8912a);
}
/* "Write a name first" (1.32.1) */
.field-err { margin-top: 0.45rem; font-size: var(--fs-sm); color: var(--danger); text-align: center; }
.field-err[hidden] { display: none; }
@keyframes shakeX { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
#char-name.shake { animation: shakeX 0.35s var(--ease-soft); }
.input-container:focus-within {
filter: drop-shadow(2px 0px 0px #ffcc00) drop-shadow(-2px 0px 0px #ffcc00) drop-shadow(0px 2px 0px #ffcc00) drop-shadow(0px -2px 0px #ffcc00) drop-shadow(0px 0px 15px rgba(255, 204, 0, 0.8));
}
input[type="text"] {
background: rgba(255, 255, 255, 0.85);
border: 2px solid rgba(212, 175, 55, 0.8);
color: #000;
font-weight: bold;
padding: 1rem 1.5rem;
border-radius: 0;
clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0% 50%);
font-family: 'Inter', 'Vazirmatn', sans-serif;
font-size: 1.2rem;
outline: none;
transition: all 0.3s;
text-align: center;
width: 320px;
}
input[type="text"]:focus {
border-color: #ffcc00;
box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
}
.btn {
background: rgba(255, 255, 255, 0.05);
color: var(--text-color);
border: 1px solid var(--panel-border);
padding: 0.8rem 1.5rem;
border-radius: var(--r-md);
cursor: pointer;
font-family: 'Cinzel', 'Vazirmatn', serif;
font-weight: bold;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
}
.btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.btn.primary {
background: linear-gradient(135deg, #bf953f, #aa771c);
color: #051024;
border: none;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 900;
}
.btn.primary:hover {
background: linear-gradient(135deg, #fcf6ba, #bf953f);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
transform: translateY(-2px) scale(1.02);
}
/* Market (2.0.0): pick a good, then how many. Tiles in a grid, the trade panel beside it (a
column on desktop, pinned to the bottom of the window on a phone, where the thumb is). */
.mkt-tabs { display: inline-flex; gap: 4px; padding: 3px; margin: 0.6rem 0 0.5rem; border-radius: 999px;
background: rgba(0,0,0,0.35); border: 1px solid var(--panel-border); }
.mkt-tabs button { border: 0; background: none; color: var(--text-muted); font: 600 0.9rem/1 'Inter', 'Vazirmatn', sans-serif;
padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; }
.mkt-tabs button.on { background: var(--primary); color: #1a1406; }
.mkt-n { font-size: 0.72rem; opacity: 0.75; }
.mkt-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1rem; align-items: start; margin-top: 0.4rem; }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.5rem; align-content: start; }
.mkt-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0.6rem 0.35rem;
border-radius: var(--r-md); border: 1px solid var(--panel-border); background: rgba(12,11,9,0.74);
color: var(--text-color); text-align: center; cursor: pointer; font-family: 'Inter', 'Vazirmatn', sans-serif; }
.mkt-tile:hover { border-color: rgba(212,175,55,0.6); }
.mkt-tile.sel { border-color: var(--primary); background: rgba(58,44,16,0.88); box-shadow: inset 0 0 0 1px var(--primary); }
.mkt-tile.out { opacity: 0.55; }
.mkt-tile .mt-nm { font: 600 0.8rem/1.2 'Inter', 'Vazirmatn', sans-serif; }
.mkt-tile .mt-pr { font-size: 0.8rem; }
.mkt-tile .mt-bd { font-size: 0.68rem; display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; min-height: 0.9rem; }
.mkt-empty, .mp-hint { color: var(--text-muted); font-size: var(--fs-sm); margin: 0.4rem 0; }
.mkt-panel { position: sticky; top: 0; display: grid; gap: 0.6rem; padding: 0.9rem; border-radius: var(--r-lg);
border: 1px solid rgba(212,175,55,0.35); background: #120f0b; }
.mp-head { display: flex; align-items: center; gap: 0.7rem; }
.mp-head b { display: block; font: 600 1rem/1.25 'Inter', 'Vazirmatn', sans-serif; }
.mp-head small { color: var(--text-muted); font-size: var(--fs-xs); }
.mp-ic img.ico-px.big { width: 48px; height: 48px; }
.mp-note { font-size: var(--fs-xs); color: #cbb26b; line-height: 1.35; }
.mp-cmp { font-size: var(--fs-sm); color: var(--text-muted); }
.mp-qty { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; }
.mp-qty button, .mp-chips button { border-radius: var(--r-sm); border: 1px solid var(--panel-border); background: rgba(0,0,0,0.4);
color: var(--text-color); font: 600 1.05rem/1 'Inter', 'Vazirmatn', sans-serif; cursor: pointer; min-height: 40px; }
.mp-qty button:disabled { opacity: 0.35; cursor: default; }
.mp-qty input { width: 100%; text-align: center; font: 600 1.05rem/1 'Inter', 'Vazirmatn', sans-serif; padding: 0.5rem; border-radius: var(--r-sm);
border: 1px solid rgba(212,175,55,0.45); background: rgba(0,0,0,0.5); color: var(--text-color); transform: none; }
.mp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-chips button { flex: 1; font-size: 0.85rem; padding: 0 0.5rem; }
.mp-chips button.on { border-color: var(--primary); color: var(--primary); }
.mp-why { font-size: var(--fs-sm); color: #e8a13a; }
.mp-go { width: 100%; font-size: 1rem; padding: 0.8rem; }
.mp-msg:empty { display: none; }
.mp-msg { font-size: var(--fs-sm); line-height: 1.35; }
@media (max-width: 820px) {
.mkt-body { grid-template-columns: 1fr; }
.mkt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mkt-panel { top: auto; bottom: 0; box-shadow: 0 -10px 24px rgba(0,0,0,0.7); }
.mkt-panel .mp-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Portrait frame (2.0.0, Nobles.framed): the kingdom's colour as a thin outer ring */
.portrait { position: relative; flex: 0 0 auto; box-sizing: border-box; padding: 5px; border-radius: 10px;
background: linear-gradient(160deg, #4a3818, #1c150b);
box-shadow: 0 0 0 1px #d4af37, 0 0 0 3px #120e08, 0 0 0 4px var(--fc, #d4af37), 0 8px 18px rgba(0,0,0,0.55); }
.portrait > .pimg { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 14px #000; }
.portrait > .pimg svg { display: block; width: 100%; height: 100%; }
.portrait.round, .portrait.round > .pimg { border-radius: 50%; }
.portrait > .pimg.px { background-size: cover; background-position: center; image-rendering: pixelated; image-rendering: crisp-edges; }
/* Pixel item icons (2.0.0): 16px art shown 1.5em in a list, 40px in the bag and the slots */
img.ico-px { width: 1.5em; height: 1.5em; vertical-align: -0.4em; image-rendering: pixelated; image-rendering: crisp-edges; }
img.ico-px.big { width: 40px; height: 40px; vertical-align: middle; }
.equip-slot img.ico-px.big { width: 70%; height: auto; max-width: 48px; }
/* a sharpened weapon's edge (2.6.0), a small tag on its slot */
.eq-edge { position: absolute; right: -6px; bottom: -6px; padding: 0 3px; border-radius: 6px; background: #1c2430;
border: 1px solid #9fb6d8; color: #dfe9f7; font: 700 var(--fs-xs)/1.3 'Inter', 'Vazirmatn', sans-serif; pointer-events: none; }
.equip-slot-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; opacity: 0.35; filter: grayscale(0.6); }
/* The start screen's secondary buttons (2.0.0): the game's dark glass with a gold edge and a
line icon, in place of the orange hexagons */
.start-act {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.7rem 1.2rem; border-radius: 999px;
background: rgba(12,11,9,0.78); border: 1px solid rgba(212,175,55,0.45); color: #f2e4bb;
font: 600 0.95rem/1 'Inter', 'Vazirmatn', sans-serif; letter-spacing: 0.02em;
transition: border-color .2s, background .2s, transform .2s;
}
.start-act svg.i { color: var(--primary); width: 1.1em; height: 1.1em; }
.start-act:hover { border-color: var(--primary); background: rgba(40,32,14,0.9); transform: translateY(-1px); }
/* Game.showLore — the start screen's lords and kingdoms. The modal scrolls, the list doesn't. */
.lore { text-align: center; }
.lore h2 { font-family: 'Cinzel', 'Vazirmatn', serif; color: #ffcc00; font-size: 2.5rem; margin-bottom: 2rem; text-shadow: 0 0 10px rgba(255,204,0,0.5); }
.lore-list { display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }
.lore-row { display: flex; gap: 2rem; align-items: center; background: rgba(0,0,0,0.6); padding: 1.2rem 2rem; border-radius: var(--r-md); }
.lore-row > div:last-child { min-width: 0; }
.lore-row h3 { font-size: 1.6rem; margin-bottom: 0.2rem; font-family: 'Cinzel', 'Vazirmatn', serif; }
.lore-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 0.5rem; }
.lore-row p { color: #eee; line-height: 1.4; font-size: 1.2rem; font-family: 'Cormorant Garamond', 'Georgia', serif; font-style: italic; }
.lore-frame { flex: none; padding: 12px; background: linear-gradient(135deg,#5c3a21,#2a160b);
box-shadow: inset 0 0 15px #000, 0 10px 20px rgba(0,0,0,0.9); border: 2px solid #111; display: inline-block; }
.lore-frame > div { border: 6px ridge #dca243; padding: 4px; background: #1a0b02; box-shadow: inset 0 0 10px #000; }
.lore-close { margin-top: 2rem; width: 200px; }
#march-canvas { display: block; width: min(480px, 86vw); height: auto; aspect-ratio: 5 / 1; margin: 1.1rem auto 0;
image-rendering: pixelated; image-rendering: crisp-edges;
/* the strip fades out at both ends instead of stopping like a floating platform */
-webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
#start-btn {
border-radius: 0;
clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0% 50%);
text-transform: uppercase;
font-size: 1.3rem;
padding: 1.2rem 3.5rem;
border: none;
background: linear-gradient(135deg, #d2a412 0%, #8c6000 100%);
color: #051024;
font-weight: 900;
letter-spacing: 3px;
position: relative;
filter: drop-shadow(2px 0px 0px #ff8c00) drop-shadow(-2px 0px 0px #ff8c00) drop-shadow(0px 2px 0px #ff8c00) drop-shadow(0px -2px 0px #ff8c00);
margin-top: 0.5rem;
transition: all 0.3s ease;
}
#start-btn:hover {
background: linear-gradient(135deg, #fcd033 0%, #b88200 100%);
filter: drop-shadow(2px 0px 0px #ffcc00) drop-shadow(-2px 0px 0px #ffcc00) drop-shadow(0px 2px 0px #ffcc00) drop-shadow(0px -2px 0px #ffcc00) drop-shadow(0px 0px 20px rgba(255, 204, 0, 0.8));
transform: scale(1.05);
color: #051024;
}
#start-btn:hover {
background: rgba(212, 175, 55, 0.9);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
color: #051024;
transform: translateY(0); /* override */
}
#start-btn:hover::before { top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--primary); opacity: 0.5; }
#start-btn:hover::after { bottom: 0; right: 0; width: 100%; height: 100%; border: 1px solid var(--primary); opacity: 0.5; }
/* --- MAIN UI --- */
#top-bar {
display: flex;
justify-content: space-around;
padding: 1rem;
flex-shrink: 0;
border-bottom: 2px solid var(--panel-border);
border-radius: 0;
}
.stat { font-size: 1.1rem; font-weight: 600; text-shadow: 1px 1px 3px black; }
.icon { margin-right: 0.4rem; }
.tooltip-container {
position: relative;
cursor: help;
}
.tooltip-container .tooltip-content {
visibility: hidden;
opacity: 0;
position: absolute;
top: 130%;
left: 50%;
transform: translateX(-50%);
background: var(--bg-dark);
border: 1px solid var(--primary);
padding: 0.8rem;
border-radius: var(--r-md);
box-shadow: 0 4px 15px rgba(0,0,0,0.8);
width: max-content;
z-index: 200;
transition: opacity 0.2s, visibility 0.2s;
font-size: 0.9rem;
font-weight: normal;
color: #fff;
text-shadow: none;
line-height: 1.4;
text-align: left;
}
.tooltip-container:hover .tooltip-content {
visibility: visible;
opacity: 1;
}
.content-area {
display: flex;
flex: 1;
gap: 1rem;
padding: 1rem;
overflow: hidden;
}
#sidebar {
width: 160px;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex-shrink: 0;
}
.menu-btn {
background: transparent;
border: none;
color: var(--text-muted);
padding: 1rem;
text-align: left;
font-size: 1.1rem;
font-family: 'Cinzel', 'Vazirmatn', serif;
font-weight: bold;
cursor: pointer;
border-radius: var(--r-md);
transition: all 0.2s;
border-left: 4px solid transparent;
}
.menu-btn:hover {
background: rgba(212, 175, 55, 0.1);
color: var(--text-color);
}
.menu-btn.active {
background: rgba(212, 175, 55, 0.2);
color: var(--primary);
border-left: 4px solid var(--primary);
box-shadow: inset 20px 0 20px -20px rgba(212, 175, 55, 0.5);
}
#view-container {
flex: 1;
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
}
.view {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: none;
padding: 1.5rem;
overflow-y: auto;
}
.view.active { display: block; animation: viewIn 0.2s var(--ease-soft); }
/* Screens fade in rather than cut (1.32.0); the map/battle canvases fade with their view. */
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
/* A top-bar number that just changed gives a short bump: green up, red down (1.32.0). */
@keyframes chipUp { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,195,138,0); } 30% { transform: scale(1.07); box-shadow: 0 0 0 3px rgba(76,195,138,0.45); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,195,138,0); } }
@keyframes chipDown { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224,96,90,0); } 30% { transform: scale(0.96); box-shadow: 0 0 0 3px rgba(224,96,90,0.45); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224,96,90,0); } }
.hud-chip.bump-up { animation: chipUp 0.6s var(--ease-soft); }
.hud-chip.bump-down { animation: chipDown 0.6s var(--ease-soft); }
/* 2.1.1: a gain says how much — "+N" drops out under the badge and the icon pops (Game.gainFx) */
.hud-plus {
position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, 0);
font: 700 0.8rem/1 'Inter', 'Vazirmatn', sans-serif; color: #9fe0a0; padding: 2px 6px; border-radius: 999px; background: rgba(10,12,9,.72); letter-spacing: .02em;
text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 8px rgba(76,195,138,.55);
animation: hudPlus 1.2s var(--ease-soft) forwards;
}
@keyframes hudPlus {
0% { opacity: 0; transform: translate(-50%, -8px) scale(0.8); }
18% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
70% { opacity: 1; transform: translate(-50%, 6px) scale(1); }
100% { opacity: 0; transform: translate(-50%, 12px) scale(1); }
}
.hud-chip.bump-up .hud-ico { animation: icoPop 0.6s var(--ease-soft); }
@keyframes icoPop { 30% { transform: scale(1.3) rotate(-8deg); } 60% { transform: scale(0.95) rotate(4deg); } }
.hud-bar i.bar-gain { animation: barGain 0.9s ease-out; }
@keyframes barGain { 0% { filter: brightness(1); } 25% { filter: brightness(1.9) saturate(1.3); box-shadow: 0 0 6px rgba(245,215,110,.8); } 100% { filter: brightness(1); } }
/* Map */
#map-view { padding: 0; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--panel-border); }
#map-canvas {
width: 100%;
height: 100%;
background-color: #1e293b;
cursor: crosshair;
display: block;
position: relative; /* above #map-gl, below the HUD: z-index auto, so DOM order decides */
}
/* The WebGL map (1.34.0) sits under #map-canvas; while it draws, #map-canvas is see-through but
still the element every pointer handler, the cursor and the tutorial highlight are bound to. */
#map-gl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: none; background: #0a1c2e; }
#map-gl[hidden] { display: none; }
#map-view.gl #map-canvas { opacity: 0; }
#map-tooltip {
position: absolute;
padding: 0.5rem 0.9rem;
pointer-events: none;
z-index: 10;
white-space: nowrap;
font-size: 0.88rem;
line-height: 1.45;
border: 1px solid var(--primary);
}
#map-tooltip strong {
display: block;
margin-bottom: 0.2rem;
font-family: 'Cinzel', 'Vazirmatn', serif;
font-size: 1rem;
color: var(--primary);
}
/* Battle */
#battle-view { padding: 0; display: none; flex-direction: column; overflow: hidden; }
#battle-view.active { display: flex; }
#battle-canvas, #battle-gl {
flex: 1;
width: 100%;
min-height: 0;
display: block;
background: #2d422a;
}
/* One of the two battle canvases shows (1.33.0); an id selector outranks the UA's [hidden] rule */
#battle-view > canvas[hidden] { display: none; }
#battle-ui {
padding: 0.8rem;
background: rgba(0,0,0,0.8);
display: flex;
gap: 1rem;
align-items: center;
border-top: 2px solid var(--primary);
}
#battle-log {
position: absolute;
bottom: 80px;
left: 20px;
width: 300px;
height: 150px;
overflow: hidden;
display: flex;
flex-direction: column-reverse; /* Yeni mesajlar altta */
font-size: var(--fs-sm);
color: #fff;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
}
.log-msg {
margin-top: 4px;
text-shadow: 1px 1px 2px #000;
}
/* Settlement */
.action-list {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Action cards (2.0.0): grouped, icon + title + one-line hint + status on the right */
#settlement-actions { gap: 1rem; }
.act-group h4 { margin: 0 0 0.5rem; font: 600 var(--fs-xs)/1 'Inter', 'Vazirmatn', sans-serif; letter-spacing: .16em;
text-transform: uppercase; color: #8a8173; }
.act-cards { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.act-card, #settlement-actions .act-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem;
text-align: left; padding: 0.7rem 0.8rem; margin: 0; border-radius: var(--r-md); font-family: 'Inter', 'Vazirmatn', sans-serif;
text-transform: none; letter-spacing: 0; font-variant: normal; }
.act-card .ac-ic { width: 2.3rem; height: 2.3rem; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--primary);
background: radial-gradient(circle at 35% 30%, #3a3020, #1a1610); border: 1px solid rgba(212,175,55,0.28); }
.act-card .ac-ic svg.i { width: 1.25rem; height: 1.25rem; }
.act-card .ac-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-card .ac-tx b { font: 600 0.95rem/1.2 'Inter', 'Vazirmatn', sans-serif; color: var(--text-color); }
.act-card .ac-tx small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
.act-card .ac-mt { font: 600 var(--fs-xs)/1.2 'Inter', 'Vazirmatn', sans-serif; color: var(--primary); text-align: right; max-width: 9rem;
font-variant-numeric: tabular-nums; }
.act-group.act-war .ac-ic { color: var(--danger); border-color: rgba(224,96,90,0.35); }
.act-card.act-quiet { background: transparent; }
.act-card:disabled { opacity: 0.45; cursor: default; }
/* dialogue cards (2.0.0, Game.cardButtons): the tone a button used to carry in its border colour */
.act-card.tone-danger .ac-ic { color: var(--danger); border-color: rgba(224,96,90,0.4); }
.act-card.tone-danger { border-color: rgba(224,96,90,0.45); }
.act-card.tone-love .ac-ic { color: #ff9ec4; border-color: rgba(255,158,196,0.4); }
.act-card.tone-love { border-color: rgba(255,158,196,0.45); }
.act-card.tone-gold { border-color: rgba(224,176,98,0.7); }
.act-card.tone-done { border-color: var(--success); }
.act-card.tone-done .ac-ic { color: var(--success); }
.lord-acts { margin-top: 1.2rem; }
@media (max-width: 560px) {
/* a phone: one card per row, and a smaller portrait with the words flowing beside and under it */
.lord-acts.act-cards { grid-template-columns: 1fr; }
.lord-head { gap: 0.9rem !important; flex-wrap: wrap; }
.lord-head > .portrait { width: 88px !important; height: 88px !important; flex: none; }
.lord-head > div:not(.portrait) { flex: 1 1 calc(100% - 88px - 0.9rem); }
}
/* Character creation (2.0.0): progress segments, readable option cards, effect chips */
.cr-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 1rem; }
.cr-steps i { height: 4px; border-radius: 2px; background: rgba(236,230,218,0.12); }
.cr-steps i.on { background: var(--primary); }
.cr-steps i.cur { background: var(--primary-hover); box-shadow: 0 0 8px rgba(245,215,110,.6); }
.btn.cr-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; text-align: left; line-height: 1.4;
padding: 0.8rem 1rem; text-transform: none; letter-spacing: 0; font-variant: normal; }
.btn.cr-opt b { font-family: 'Cinzel', 'Vazirmatn', serif; font-size: 1.02rem; }
.btn.cr-opt.sel { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.cr-desc { font: 400 var(--fs-sm)/1.45 'Inter', 'Vazirmatn', sans-serif; color: var(--text-muted); font-style: normal; }
.cr-fx { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cr-fx span { font: 600 var(--fs-xs)/1 'Inter', 'Vazirmatn', sans-serif; padding: 0.3rem 0.45rem; border-radius: 6px;
background: rgba(236,230,218,0.07); color: #cfc6b6; }
.cr-fx span.neg { background: rgba(224,96,90,0.14); color: #f39b94; }
.cr-fx span.pos { background: rgba(76,195,138,0.14); color: #86dfb3; }
/* The "?" beside a creation question and the attribute guide it opens (2.10.1) */
.cr-help { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
margin-left: 0.45rem; padding: 0; vertical-align: 0.15em; border-radius: 50%; cursor: pointer; position: relative;
border: 1px solid rgba(245,215,110,0.55); background: rgba(245,215,110,0.1); color: var(--primary);
font: 700 0.8rem/1 'Inter', 'Vazirmatn', sans-serif; }
.cr-help:hover, .cr-help[aria-expanded="true"] { background: var(--primary); color: #1a1408; }
.cr-help::before { content: ''; position: absolute; inset: -11px; } /* the 44px tap target, drawn small */
#modal-body .cr-help { min-width: 0; min-height: 0; }
.cr-attr-help { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: var(--r-md);
border: 1px solid rgba(245,215,110,0.3); background: rgba(0,0,0,0.3); font-size: var(--fs-sm); line-height: 1.45; }
.cr-attr-help > b { font-family: 'Cinzel', 'Vazirmatn', serif; color: var(--primary); }
.cr-attr-help ul { list-style: none; margin: 0.45rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.cr-attr-help li { display: flex; gap: 0.5rem; }
.cr-attr-help li > span { flex: none; }
.cr-attr-help p { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.cr-fx span[title] { cursor: help; }
/* Modal */
#modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
backdrop-filter: blur(8px);
}
#modal-overlay.hidden { display: none; }
#modal-content {
background: linear-gradient(180deg, #1a1a24 0%, #0a0a0f 100%);
border: 2px solid var(--primary);
box-shadow: 0 0 40px rgba(212, 175, 55, 0.2), inset 0 0 20px rgba(0,0,0,0.8);
min-width: 450px;
max-width: 700px;
max-height: 80vh;
overflow-y: auto;
padding: 2.5rem;
text-align: center;
border-radius: var(--r-md);
}
/* Gövdesine kendi düğmesini koymayan pencere çıkışsız görünüyordu (#70): Esc ve dışa
tıklama çalışıyordu ama ekranda "buradan çıkılır" diyen tek piksel yoktu. `sticky`,
uzun pencere kaydırılınca da × köşede kalsın diye — `absolute` olsa yukarı kaçardı. */
#modal-close {
position: sticky; top: 0; z-index: 3;
display: block; margin: -1.2rem -1.2rem 0 auto;
width: 2.4rem; height: 2.4rem; padding: 0;
/* Uzun pencere kaydırılınca metin arkadan sızıp × üstüne biniyordu — sticky
kalan düğme kendi zemini olmadan okunaksız oluyordu. */
background: rgba(10, 10, 15, 0.85);
border: none; border-radius: var(--r-sm);
color: var(--text-muted); font-size: 1.9rem; line-height: 2.2rem;
cursor: pointer;
}
#modal-close:hover { color: var(--primary); background: rgba(212, 175, 55, 0.18); }
/* The opaque backing above only keeps the × glyph legible over scrolled-under text —
it doesn't stop that text from reaching it, so a line can still wrap mid-word right
against the button (or a button/card edge can tuck half behind it). Sticky pins the
× over the body at every scroll position, not just the top, so the gutter has to run
the full height, not just around the heading. */
#modal-body { margin-bottom: 1.5rem; padding-right: 1.8rem; text-align: left; line-height: 1.6; font-size: 1.05rem; }
.hidden { display: none !important; }
@keyframes pulse-border {
0% { border-color: rgba(212, 175, 55, 0.2); box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
50% { border-color: rgba(212, 175, 55, 1); box-shadow: 0 0 15px rgba(212, 175, 55, 0.6); }
100% { border-color: rgba(212, 175, 55, 0.2); box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
}
.planning-active {
animation: pulse-border 1.5s infinite;
color: var(--primary) !important;
}
/* Lore Timeline */
.lore-timeline {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 1rem;
}
.lore-item {
display: flex;
align-items: center;
gap: 1.5rem;
background: rgba(255,255,255,0.03);
padding: 1rem;
border-radius: var(--r-lg);
border: 1px solid var(--panel-border);
}
.lore-item:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
}
.lore-portrait {
font-size: 4rem;
background-color: rgba(0,0,0,0.5);
background-size: 240px 240px;
background-repeat: no-repeat;
border-radius: 50%;
width: 80px; height: 80px;
display: flex; justify-content: center; align-items: center;
border: 2px solid var(--primary);
box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
flex-shrink: 0;
}
.lore-content h4 { color: var(--primary); margin-bottom: 0.5rem; font-size: 1.3rem; }
.lore-content p { color: var(--text-color); font-size: 0.95rem; line-height: 1.5; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.4); border-radius: var(--r-xs); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: var(--r-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }
/* ==========================================================================
RENOVASYON — genel görsel elden geçirme
========================================================================== */
body {
background:
radial-gradient(ellipse at 50% -10%, rgba(212,175,55,0.07) 0%, transparent 55%),
radial-gradient(ellipse at 50% 110%, rgba(60,90,140,0.06) 0%, transparent 55%),
var(--bg-dark);
}
/* Panellere hafif iç doku ve üst tepe ışığı */
.glass-panel {
background:
linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 32%),
var(--panel-bg);
box-shadow:
0 10px 34px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.06);
}
/* ============ SEFER ÇUBUĞU (HUD) ============ */
#top-bar {
justify-content: center;
align-items: stretch;
gap: 0.35rem;
padding: 0.45rem 0.8rem;
flex-wrap: wrap;
border-bottom: 1px solid rgba(212,175,55,0.35);
background:
linear-gradient(180deg, rgba(46,38,24,0.95), rgba(12,11,14,0.96));
box-shadow: 0 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
.hud-chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.7rem;
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
border: 1px solid rgba(212,175,55,0.22);
white-space: nowrap;
transition: border-color .2s, background .2s;
}
.hud-chip:hover { border-color: rgba(212,175,55,0.5); }
.hud-ico { font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.hud-col { display: inline-flex; flex-direction: column; gap: 2px; min-width: 52px; }
.hud-val {
font-family: 'Cinzel', 'Vazirmatn', serif;
font-weight: 700;
font-size: 0.92rem;
line-height: 1;
color: #f0e3c0;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.hud-sub { font-size: 0.63rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); line-height: 1; }
.hud-bar {
display: block;
height: 4px;
border-radius: var(--r-pill);
background: rgba(0,0,0,0.55);
box-shadow: inset 0 1px 2px rgba(0,0,0,.8);
overflow: hidden;
}
.hud-bar > i { display: block; height: 100%; border-radius: var(--r-pill); transition: width .25s ease; }
.fill-hp { background: linear-gradient(90deg, #7d2020, #e05353); }
.fill-party { background: linear-gradient(90deg, #2b5f7a, #59b6e0); }
.fill-xp { background: linear-gradient(90deg, #8a6a1c, #f0cd5c); }
.fill-morale{ background: linear-gradient(90deg, #7a4a12, #e59b3d); }
.fill-cargo { background: linear-gradient(90deg, #4a3a1c, #b99a4e); }
.hud-sep { width: 1px; align-self: stretch; margin: 0 0.2rem; background: linear-gradient(180deg, transparent, rgba(212,175,55,0.35), transparent); }
/* ---- Icon set (2.0.0): line icons from #icon-sprite, coloured by `color` ---- */
svg.i { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hud-ico { color: var(--primary); display: inline-flex; }
.hud-ico svg.i { width: 1.2rem; height: 1.2rem; }
.hud-ico-hp { color: #e8665e; }
.mb-ico svg.i { width: 1.2em; height: 1.2em; }
.mh-ico { color: var(--primary); }
/* HUD groups: related chips share one tray; the tray, not each chip, carries the frame */
.hud-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: calc(var(--r-md) + 3px);
background: rgba(0,0,0,0.32); border: 1px solid rgba(236,230,218,0.06); }
.hud-group .hud-chip { border-color: transparent; background: none; }
.hud-group .hud-chip:hover { border-color: rgba(212,175,55,0.35); background: rgba(212,175,55,0.07); }
/* the one value that needs attention says so: colour and a pulse */
.hud-chip.warn { background: rgba(224,96,90,0.14) !important; position: relative; }
.hud-chip.warn .hud-ico { color: var(--danger); }
.hud-chip.warn .hud-val { color: #ff9a92; }
.hud-chip.warn::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
background: var(--danger); animation: hud-ping 1.8s infinite; }
@keyframes hud-ping { 0% { box-shadow: 0 0 0 0 rgba(224,96,90,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(224,96,90,0); } }
@media (prefers-reduced-motion: reduce) { .hud-chip.warn::after { animation: none; } }
#hud-toggle { display: none; align-self: center; width: 34px; height: 34px; border-radius: 50%; padding: 0;
border: 1px solid rgba(212,175,55,0.3); background: rgba(0,0,0,0.35); color: var(--primary); cursor: pointer; font-size: 1rem; }
#hud-toggle svg.i { transition: transform .2s; }
body.hud-open #hud-toggle svg.i { transform: rotate(180deg); }
#chip-time .hud-col { min-width: 62px; }
#chip-speed { cursor: help; }
/* Üst çubuk kendi yığın bağlamını kuruyor; ipucu içeriğin altında kalmasın */
#top-bar { position: relative; z-index: 60; }
.tooltip-container .tooltip-content { top: 118%; }
/* Taşma Game.initTooltipClamp() ile tek yerden hallediliyor — rozet rozet
elle hizalama (eski #chip-speed / #chip-time istisnaları) kaldırıldı. */
.tooltip-container .tooltip-content { white-space: normal; overflow-wrap: anywhere; }
/* ============ HARİTA ODAKLI DÜZEN (#40) ============
Map view only (body.view-map): the map canvas fills the whole viewport and the chrome
floats over it as translucent glass edge panels. Other views keep the flow layout.
showScreen() re-runs resizeCanvases() when the class flips, so the canvas picks up the
new full-viewport box. The nav is a vertically-centred icon strip so it never collides
with the wrapping (variable-height) top bar. */
body.view-map #view-container { position: fixed; inset: 0; z-index: 1; }
body.view-map #top-bar {
/* Fixed escapes .screen's containing block (absolute doesn't contain fixed), so it
needs its own notch offset instead of inheriting .screen's inset (#40 regression). */
position: fixed; top: var(--safe-top); left: 0; right: 0; z-index: 40;
opacity: 0.9; transition: opacity .2s;
}
body.view-map #top-bar:hover { opacity: 1; }
body.view-map #sidebar {
position: fixed; left: 8px; top: 50%; transform: translateY(-50%);
width: auto; height: auto; max-height: calc(100vh - 96px);
overflow-y: auto; overflow-x: hidden;
border-radius: var(--r-lg); padding: 0.35rem 0.3rem; gap: 0.1rem; z-index: 40;
opacity: 0.9; transition: opacity .2s;
}
body.view-map #sidebar:hover { opacity: 1; }
body.view-map #sidebar .sb-title { display: none; }
/* 2.1.1: on the map the strip keeps its words and keys, the same rows as on every other screen.
The icon-only strip took nearly the same width and left the player guessing. */
body.view-map #sidebar > div[style*="flex"] { display: none; }
body.view-map #map-hud { left: 212px; } /* clear of the labelled strip (2.1.1: ~190 px in EN) */
/* ============ KENAR MENÜSÜ ============ */
#sidebar {
/* A floor, not a fixed width: "Topraklarım", or the Indonesian "Inventaris" next to its
key badge, ran past a fixed 170px edge. The strip grows to its longest label instead. */
width: auto;
min-width: 170px;
padding: 0.7rem 0.55rem;
gap: 0.15rem;
background: linear-gradient(180deg, rgba(30,26,18,0.92), rgba(12,12,16,0.94));
}
.sb-title {
font-family: 'Cinzel', 'Vazirmatn', serif;
font-size: 0.62rem;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(212,175,55,0.55);
padding: 0.35rem 0.6rem 0.3rem;
border-bottom: 1px solid rgba(212,175,55,0.14);
margin-bottom: 0.3rem;
}
.menu-btn {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 0.7rem;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-left-width: 3px;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.mb-ico { font-size: 1.05rem; width: 1.3rem; text-align: center; filter: grayscale(0.4); transition: filter .2s, transform .2s; }
.mb-lbl { flex: 1; text-align: left; }
.menu-btn kbd {
font-family: 'Inter', 'Vazirmatn', sans-serif;
font-size: 0.6rem;
font-weight: 600;
padding: 1px 5px;
border-radius: var(--r-xs);
color: var(--text-muted);
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.09);
}
.menu-btn:hover .mb-ico { filter: grayscale(0); transform: translateX(1px); }
.menu-btn.active {
background: linear-gradient(90deg, rgba(212,175,55,0.24), rgba(212,175,55,0.03));
text-shadow: 0 0 12px rgba(212,175,55,0.5);
}
.menu-btn.active .mb-ico { filter: grayscale(0) drop-shadow(0 0 5px rgba(212,175,55,.6)); }
.menu-btn.active kbd { color: var(--primary); border-color: rgba(212,175,55,0.4); }
/* ============ HARİTA KÜNYESİ ============ */
#map-hud {
position: absolute;
left: 14px; bottom: 14px;
z-index: 12;
padding: 0.5rem 0.7rem;
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.76rem;
/* solid, not click-through: it holds buttons now, and the pointer over it is on the panel,
not on the map — no marker dropped through it, no edge panning under it */
background: rgba(8,9,12,0.86);
border: 1px solid rgba(212,175,55,0.25);
}
#map-terrain {
display: flex; align-items: center; gap: 0.35rem;
font-family: 'Cinzel', 'Vazirmatn', serif; font-weight: 700;
color: #f0e3c0; letter-spacing: .5px;
}
#map-comp { display: flex; gap: 0.5rem; }
#map-terrain .mt-short { display: none; }
#map-comp span { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); }
#map-comp b { color: #e8dcbb; font-weight: 600; }
#btn-map-speed {
pointer-events: auto; align-self: flex-start;
background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.35);
color: #f0e3c0; font-family: inherit; font-size: 0.72rem; font-weight: 600;
padding: 2px 10px; border-radius: var(--r-xs); cursor: pointer;
}
#btn-map-speed:hover { background: rgba(212,175,55,0.25); }
/* --- Başlıklar: altın ince çizgi --- */
.view > h2 {
position: relative;
padding-bottom: 0.55rem;
margin-bottom: 1.1rem;
letter-spacing: 1px;
}
.view > h2::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--primary), rgba(212,175,55,0.05));
}
/* Dar ekranda karakter/grup sütunları alt alta insin */
#char-stats > div { flex-wrap: wrap; }
#char-stats > div > div { min-width: 250px; }
.view { overflow: auto; }
/* --- Butonlar --- */
.btn {
background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.btn:hover {
border-color: rgba(212,175,55,0.6);
box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 14px rgba(212,175,55,0.18);
}
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
/* --- Harita çerçevesi --- */
#map-view {
border: 2px solid rgba(212,175,55,0.35);
box-shadow: inset 0 0 60px rgba(0,0,0,0.55);
}
/* --- Savaş arayüzü --- */
#battle-view { border-radius: var(--r-lg); border: 2px solid rgba(212,175,55,0.3); }
#battle-ui { padding: 0.5rem 0.8rem; }
.battle-logs {
position: absolute;
bottom: 62px;
/* İki kütük asla çakışmasın: her biri yarım genişlik eksi kenar payı */
width: min(330px, calc(50% - 28px));
max-height: 32%;
font-size: 0.78rem;
line-height: 1.35;
overflow: hidden;
display: flex;
flex-direction: column-reverse;
gap: 4px;
pointer-events: none;
z-index: 10;
-webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
mask-image: linear-gradient(to top, black 60%, transparent 100%);
}
.battle-logs .log-msg {
background: rgba(6,8,10,0.88) !important;
border: 1px solid rgba(212,175,55,0.18);
border-radius: var(--r-sm);
}
/* Bozgun teklifi: savaş sürerken beliren tek düğme. Kovalamak varsayılan —
hiçbir şey yapmazsan peşlerindesin; bu düğme onlara yol verir. */
#rout-prompt {
margin-left: auto;
display: flex;
gap: 0.6rem;
align-items: center;
color: #9fe0a0;
font-size: 0.92rem;
}
#rout-prompt .btn {
padding: 0.45rem 0.9rem;
font-size: 0.92rem;
border-color: rgba(159,224,160,0.7);
color: #9fe0a0;
}
#rout-prompt + #btn-surrender { margin-left: 0.6rem; }
#btn-surrender {
margin-left: auto;
padding: 0.45rem 0.9rem;
font-size: 0.92rem;
border-color: rgba(204,136,0,0.7);
color: #e8a825;
}
/* --- Modal --- */
/* Opens with a short lift-and-fade instead of appearing (1.32.0). The overlay toggles
display, which restarts the animation on every open; reduced motion flattens it. */
@keyframes modalIn {
from { opacity: 0; transform: translateY(10px) scale(0.97); }
to { opacity: 1; transform: none; }
}
#modal-overlay:not(.hidden) #modal-content { animation: modalIn 0.22s var(--ease-soft); }
#modal-content {
background:
radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.10), transparent 60%),
linear-gradient(180deg, #1b1b25 0%, #08080d 100%);
border-radius: var(--r-lg);
max-width: min(700px, 92vw);
min-width: min(450px, 88vw);
max-height: 88vh;
overflow-y: auto;
padding: 2rem;
}
/* --- Geri bildirim #33: üst çubuk künyeleri (her rozetin ne olduğu ve etkisi) --- */
#top-bar .hud-chip.tooltip-container { cursor: help; }
#top-bar #chip-time { cursor: pointer; }
#top-bar .tooltip-content { max-width: min(340px, calc(100vw - 24px)); }
/* Map HUD buttons — the badge is pointer-events:none, so they switch it back on.
Selected by their container, not by id: a fifth button was being added to four
separate id lists, which is how one of them ends up unstyled. */
#map-comp button {
pointer-events: auto;
margin-left: 0.4rem;
display: inline-flex; align-items: center; gap: 4px;
background: rgba(212,175,55,0.12);
border: 1px solid rgba(212,175,55,0.35);
color: #f0e3c0;
font-family: inherit; font-size: 0.72rem;
padding: 1px 7px; border-radius: var(--r-xs); cursor: pointer;
}
#map-comp button:hover { background: rgba(212,175,55,0.25); }
/* Harcanmamış nitelik/odak puanı rozeti (#35): dikkat çeker ama sıçramaz — yalnız ışık nefes alır */
#map-comp #btn-points {
color: #ffe9a8; font-weight: 600;
background: rgba(212,175,55,0.22); border-color: rgba(212,175,55,0.65);
animation: pointsGlow 2.2s ease-in-out infinite;
}
@keyframes pointsGlow {
0%, 100% { box-shadow: 0 0 0 rgba(212,175,55,0); }
50% { box-shadow: 0 0 10px rgba(212,175,55,0.75); }
}
/* Klavyesiz cihazda kenar menüsünün tuş rozetleri yalan (#65).
Dar ekran kuralı yetmiyordu: tablet geniş ama parmakla sürülür. */
body.touch .menu-btn kbd { display: none; }
#map-comp kbd, #btn-map-speed kbd {
font-size: 0.62rem; padding: 0 4px; border-radius: var(--r-pill);
background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15); color: var(--text-muted);
}
/* --- PERFORMANS ---
backdrop-filter, altındaki alan her karede değiştiğinde blur'u baştan hesaplar.
Hareketli tuvalin (harita/savaş) üstündeki panellerde bu her kare demek:
ölçüldü, 344x513'lük savaş tuvalinde bile 54 fps / p95 33.3 ms -> 60 fps / p95 18.2 ms.
Bu paneller camsı görünümü blur yerine daha opak zeminle koruyor. */
#map-tooltip, #map-hud, #prisoner-ui, #siege-ui, #raid-ui, #wait-ui, .battle-logs .log-msg {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#map-tooltip, #prisoner-ui, #siege-ui, #raid-ui, #wait-ui { background: rgba(12,14,18,0.93); }
/* Kuşatma/yağma/kamp paneli açıkken alt-sol künye (arazi + birlik) dar ekranda
tam ene yayılır ve köşe panelinin altında kalır (#86 ile aynı künye, farklı çakışma):
panel açıkken künye gizlenir, zaten aynı bilgiyi panel kendi başlığında taşır. */
body:has(#prisoner-ui:not(.hidden)) #map-hud,
body:has(#siege-ui:not(.hidden)) #map-hud,
body:has(#raid-ui:not(.hidden)) #map-hud,
body:has(#wait-ui:not(.hidden)) #map-hud {
display: none;
}
/* Esaret paneli */
#prisoner-ui {
position: fixed; right: 20px; bottom: 20px; z-index: 60;
width: 250px; padding: 0.8rem 0.9rem;
font-size: var(--fs-sm); line-height: 1.5;
}
#prisoner-ui h3 { margin: 0 0 0.5rem; color: #ff8f82; font-size: 1rem; text-align: center; }
#prisoner-info { color: var(--text-muted); }
#prisoner-info b { color: #e8e2d4; }
#prisoner-ui .pr-chance {
margin: 0.6rem 0; text-align: center;
border-top: 1px solid var(--panel-border); padding-top: 0.6rem;
}
#prisoner-ui .pr-chance strong { color: var(--primary); font-size: 1.15rem; }
#prisoner-ui .pr-actions { display: flex; flex-direction: column; gap: 0.4rem; }
#prisoner-ui .btn { padding: 0.4rem; font-size: var(--fs-sm); }
/* Kuşatma kampı paneli — esaret paneliyle aynı köşede, aynı ölçüde (#25) */
#siege-ui {
position: fixed; right: 20px; bottom: 20px; z-index: 60;
width: 250px; padding: 0.8rem 0.9rem;
font-size: var(--fs-sm); line-height: 1.5;
}
#siege-ui h3 { margin: 0 0 0.5rem; color: var(--primary); font-size: 1rem; text-align: center; }
#siege-info { color: var(--text-muted); }
#siege-info b { color: #e8e2d4; }
#siege-ui .pr-actions { display: flex; flex-direction: column; gap: 0.4rem; }
#siege-ui .btn { padding: 0.4rem; font-size: var(--fs-sm); }
#btn-siege-assault { border-color: var(--primary); color: var(--primary); }
/* Yağma paneli — kuşatma paneliyle aynı köşede, aynı ölçüde (#49) */
#raid-ui {
position: fixed; right: 20px; bottom: 20px; z-index: 60;
width: 250px; padding: 0.8rem 0.9rem;
font-size: var(--fs-sm); line-height: 1.5;
}
#raid-ui h3 { margin: 0 0 0.5rem; color: #ff8f52; font-size: 1rem; text-align: center; }
#raid-info { color: var(--text-muted); }
#raid-info b { color: #e8e2d4; }
#raid-ui .hud-bar { display: block; width: 100%; height: 7px; }
#raid-ui .pr-actions { display: flex; flex-direction: column; gap: 0.4rem; }
#raid-ui .btn { padding: 0.4rem; font-size: var(--fs-sm); }
#btn-escape-attempt { border-color: #ff6666; color: #ff6666; }
/* Kamp paneli — yağma paneliyle aynı köşede, aynı ölçüde (#53) */
#wait-ui {
position: fixed; right: 20px; bottom: 20px; z-index: 60;
width: 250px; padding: 0.8rem 0.9rem;
font-size: var(--fs-sm); line-height: 1.5;
}
#wait-ui h3 { margin: 0 0 0.5rem; color: #9fd0ff; font-size: 1rem; text-align: center; }
#wait-info { color: var(--text-muted); }
#wait-info b { color: #e8e2d4; }
#wait-ui .pr-actions { display: flex; flex-direction: column; gap: 0.4rem; }
#wait-ui .btn { padding: 0.4rem; font-size: var(--fs-sm); }
/* Erzak rozeti: 3 günden az kaldıysa kırmızıya döner */
/* Uyarı hâli her rozette aynı görünür (erzak, çanta, ...) */
.hud-chip.warn { border-color: rgba(224,70,58,0.65); background: rgba(90,20,16,0.35); }
.hud-chip.warn .hud-val, .hud-chip.warn .hud-sub { color: #ff8f82; }
/* İşlem geri bildirimi (#45): satır parlaması + dinar rozetinde uçan delta */
@keyframes fxFlash {
0% { background: rgba(107, 191, 89, 0.45); box-shadow: 0 0 12px rgba(107, 191, 89, 0.5); }
100% { background: transparent; box-shadow: none; }
}
@keyframes fxFlashBad {
0% { background: rgba(200, 60, 50, 0.45); box-shadow: 0 0 12px rgba(200, 60, 50, 0.5); }
100% { background: transparent; box-shadow: none; }
}
.fx-flash { animation: fxFlash 0.6s ease-out; border-radius: var(--r-sm); }
.fx-flash-bad { animation: fxFlashBad 0.6s ease-out; border-radius: var(--r-sm); }
@keyframes fxFloat {
0% { opacity: 0; transform: translate(-50%, 4px) scale(0.9); }
18% { opacity: 1; transform: translate(-50%, -6px) scale(1.08); }
100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}
.fx-float {
position: fixed; z-index: 200; pointer-events: none;
font-family: 'Cinzel', 'Vazirmatn', serif; font-weight: 700; font-size: 1.05rem;
color: var(--success); text-shadow: 0 2px 6px #000, 0 0 10px rgba(0,0,0,0.8);
animation: fxFloat 0.95s ease-out forwards;
}
.fx-float.bad { color: var(--danger); }
/* ---- Sürüm damgası, hata rozeti, erişilebilirlik (#55) ---- */
/* In the flow, not pinned to a corner: #start-screen scrolls now, so an absolutely
positioned stamp sits at the bottom of the *content* and lands on the button row
(#94) — the same collision .start-actions had. Mobile already did it this way. */
#ver-tag {
margin-top: 1rem; text-align: center;
font-size: var(--fs-xs); color: rgba(255,255,255,0.45); letter-spacing: .05em;
pointer-events: none;
}
#err-badge {
position: fixed; right: 14px; bottom: 12px; z-index: 150; cursor: pointer;
background: rgba(120, 20, 20, 0.92); border: 1px solid #e0463a; color: #ffd9d5;
padding: 0.35rem 0.7rem; border-radius: var(--r-sm); font-size: 0.78rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
#err-badge:hover { background: rgba(160, 30, 30, 0.95); }
/* Duraklatma şeridi (#113). Modalın (z-index 1000) da üstünde durur: duraklatma
menüsü açıkken de "DURAKLATILDI" görünsün. Tıklamayı yemez. */
#pause-bar {
position: fixed; top: 0; left: 50%; transform: translateX(-50%);
z-index: 1100; pointer-events: none;
padding: 0.28rem 1.3rem;
background: rgba(20, 20, 25, 0.93);
border: 1px solid var(--primary); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md);
color: var(--primary); font-family: 'Cinzel', 'Vazirmatn', serif; font-weight: 700;
font-size: var(--fs-sm); letter-spacing: 0.16em;
box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
#pause-bar.hidden { display: none; }
/* Hareket azaltma: sistem tercihi ya da ayarlar ekranı. Animasyon ve geçişler
kapanır — canvas tarafındaki karşılığı Game.reduceMotion() ile okunur. */
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
/* Müzik yükleniyor rozeti (#131). Parçalar worker önbelleğinde gelmiyor, ilk çalışta
gerçekten indiriliyor; 400 ms'den uzun sürerse bu rozet çıkıyor. Dönme animasyonunu
yukarıdaki reduced-motion kuralı kapatıyor, halka duruyor ama rozet yine okunuyor. */
#music-load {
position: fixed; right: 12px; bottom: 12px; z-index: 60;
display: flex; align-items: center; gap: 0.5rem;
padding: 0.35rem 0.7rem; border-radius: 999px;
background: rgba(10, 10, 14, 0.82); border: 1px solid var(--border-color);
color: var(--text-muted); font-size: var(--fs-xs); pointer-events: none;
}
#music-load i {
width: 0.9em; height: 0.9em; border-radius: 50%;
border: 2px solid rgba(212, 175, 55, 0.25); border-top-color: var(--primary);
animation: music-spin 0.8s linear infinite;
}
@keyframes music-spin { to { transform: rotate(360deg); } }
/* Yerleşim sahnesi (#60): düğmelerin bina olarak çizildiği tuval */
#scene-wrap { position: relative; margin: 0 0 1rem; }
#scene-scroll {
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: none;
border: 1px solid var(--panel-border);
border-radius: var(--r-md);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
#scene-scroll::-webkit-scrollbar { display: none; }
#scene-canvas { display: block; width: 100%; height: auto; }
/* The scroll cues exist only while the scene is wider than its box (`.scrolls`, set by
Game.sceneScrollSync) — on a desktop none of them shows. */
.scene-arrow, #scene-hint, #scene-track { display: none; }
#scene-wrap.scrolls .scene-arrow, #scene-wrap.scrolls #scene-track { display: flex; }
#scene-wrap.scrolls.hint #scene-hint { display: flex; }
/* Edge shade: the side that still has more scene to show darkens toward the frame */
#scene-wrap.scrolls::before, #scene-wrap.scrolls::after {
content: ''; position: absolute; top: 1px; bottom: 9px; width: 56px; pointer-events: none;
transition: opacity 0.2s; z-index: 1;
}
#scene-wrap.scrolls::before { left: 1px; border-radius: var(--r-md) 0 0 var(--r-md);
background: linear-gradient(90deg, rgba(8, 8, 12, 0.78), transparent); }
#scene-wrap.scrolls::after { right: 1px; border-radius: 0 var(--r-md) var(--r-md) 0;
background: linear-gradient(270deg, rgba(8, 8, 12, 0.78), transparent); }
#scene-wrap.at-start::before, #scene-wrap.at-end::after { opacity: 0; }
.scene-arrow {
position: absolute; top: calc(50% - 4px); transform: translateY(-50%); z-index: 2;
width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
align-items: center; justify-content: center;
border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.55);
background: rgba(10, 10, 14, 0.82); color: var(--primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); cursor: pointer;
transition: opacity 0.2s;
}
.scene-arrow svg.i { width: 22px; height: 22px; }
#scene-left { left: 6px; } #scene-left svg.i { transform: rotate(90deg); }
#scene-right { right: 6px; } #scene-right svg.i { transform: rotate(-90deg); }
#scene-wrap.at-start #scene-left, #scene-wrap.at-end #scene-right { opacity: 0; pointer-events: none; }
/* The words: a pill until the first slide, then only the arrows, shade and track stay */
#scene-hint {
position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
align-items: center; gap: 0.45rem; pointer-events: none;
width: max-content; max-width: calc(100% - 24px); text-align: center; /* the longest (Indonesian) wraps on a 320 px phone */
padding: 0.35rem 0.8rem; border-radius: 999px;
background: rgba(10, 10, 14, 0.86); border: 1px solid rgba(212, 175, 55, 0.6);
color: #f2e4bb; font: 600 var(--fs-sm) / 1.2 'Inter', 'Vazirmatn', sans-serif;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
#scene-hint svg.i { color: var(--primary); width: 1.15em; height: 1.15em; animation: sceneSwipe 1.6s ease-in-out infinite; }
@keyframes sceneSwipe { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
/* Where in the scene you are: a thin track under it, the thumb as wide as the view */
#scene-track { position: relative; height: 4px; margin: 5px 18% 0; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
#scene-track i { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; border-radius: 2px; background: var(--primary); opacity: 0.8; }
/* First entry: the scene slides a little and back, so a thumb sees it moves */
#scene-wrap.peek #scene-canvas { animation: scenePeek 1.1s var(--ease-soft) 0.35s 1; }
@keyframes scenePeek { 0%, 100% { transform: none; } 45%, 60% { transform: translateX(-46px); } }
@media (prefers-reduced-motion: reduce) {
#scene-wrap.peek #scene-canvas, #scene-hint svg.i { animation: none; }
}
/* Görev ekranının parşömen zemini (#61): soluk gri `--text-muted` kahverengi kâğıt üstünde
3.2:1'e düşüyordu. Değişken ekrana özel sıcak açık tona çekilir — zemin kalır, yazı okunur. */
#quests-view { --text-muted: #e6dcc2; }
/* ============================================================
DOKUNMATİK VE MOBİL (#65)
Tek kural: giriş yolu `pointer: coarse`, yerleşim `max-width`.
İkisi ayrı sorular — tabletin geniş ekranı da parmakla sürülür.
============================================================ */
/* Tuvaller tarayıcının kendi kaydırma/zoom jestini yemesin; pan ve pinch bizde.
#scene-canvas hariç: onun kendi pan/pinch kodu yok, sadece tıklama (#renderScene). `none`
bırakılırsa üstünden başlayan bir parmak kaydırması ne native scroll'a ne bize gider,
sessizce yutulur — şehir ekranı mobilde en alta kadar kaydırılamaz hale gelir. */
#map-canvas, #map-gl, #battle-canvas, #battle-gl { touch-action: none; }
/* Pinch-zooming the whole UI breaks the game (panel sizes are computed from the
screen, so after a zoom nothing sits where it belongs). Scrolling stays free, pinch
is gone, and `pan-x pan-y` closes the double-tap zoom with it.
The selector is `*`, not `html, body`: touch-action is **not inherited**, so a rule on
the body never reached the buttons and panels inside it — they kept the initial `auto`
and a quick double-tap on any button still zoomed the page (#91). The canvases above,
the sliders below and the sticks all override this with `none`; an id or class selector
outranks `*`. */
* { touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }
/* A finger holds a button to open its tooltip (`Game.clampTip`); iOS answered the same
hold with its own selection magnifier and callout menu on top of it. Both are inherited
properties, so `body` covers the tree; the two text fields take theirs back. */
body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
/* Sürgüler `pan-x pan-y`yi miras alıyordu: parmak sürüklemesi biraz dikey olunca
tarayıcı jesti kaydırma sanıp sürgüden çalıyordu — gönüllü/paralı asker sayısı
"bazen" seçilemiyordu. `none` sürgüde jest pazarlığını bitirir; yükseklik de
parmağın ıskalamaması için büyütüldü. */
input[type="range"] { touch-action: none; height: 2.4rem; }
/* --- Savaş kumandası: yalnız parmakla oynanan cihazda --- */
#touch-ui { display: none; }
@media (pointer: coarse) {
#touch-ui { display: block; }
/* `:hover` parmakta yok — künye dokunmayla açılır (Game.initTouchUI) */
.tooltip-container:hover .tooltip-content { visibility: hidden; opacity: 0; }
.tooltip-container.tip-open .tooltip-content { visibility: visible; opacity: 1; }
/* Dokunma hedefi en az 44 px (WCAG 2.5.5) — yalnız yükseklik yetmiyordu:
karakter ekranındaki `+` 21 px, envanterdeki "Çıkar" 24 px genişti (#86) */
.btn, .menu-btn, #settlement-actions button, .action-list button,
#map-hud button, #map-acts button, #modal-body button { min-height: 44px; min-width: 44px; }
/* Kütük kumandanın üstünde başlar. Sabit 236 px, kumanda ölçüsü değişince
(ve kısa tuvalde) emir şeridinin üstüne biniyordu (#86): artık kumandadan türer. */
.battle-logs {
bottom: calc(var(--tui-lift) + var(--tui-stick) + 56px);
max-height: 20%; font-size: 0.7rem;
}
}
/* --- Savaşta tam ekran (#86, #132) ---
Telefonda sefer çubuğu + menü şeridi 664 px'in 228'ini yiyordu; savaşta ikisi de
işe yaramıyor. Bu artık her cihazda geçerli: menü butonlarının kendi `Battle.active`
koruması yoktu (yalnız klavye kısayollarında vardı), masaüstünde görünür ve tıklanabilir
kalıyordu — tıklayınca `showScreen` DOM'u değiştiriyor ama oyun döngüsü savaş bitene kadar
yeniden başlamıyor, sonuç kara bir ekran (#132: arenada görüldü, ama her savaşta olurdu). */
body.in-battle #top-bar, body.in-battle #sidebar { display: none; }
body.in-battle .content-area { padding: 0; gap: 0; }
body.in-battle #battle-view { border-radius: 0; border-width: 0; }
@media (pointer: coarse) {
/* Savaş kütüğü telefonda tek satır (#89). İki köşe yığını 46vw × %20'ydi: ölüm
satırları, komutan repliği ve emir yazıları arenanın alt yarısını kaplıyor,
oyuncu kendi silüetini göremiyordu. Artık güç çubuğunun altında, tam enine
tek satır; `battle.js` orada yalnız son mesajı bırakıyor. Sağ kütük kapanır —
taraf bilgisi zaten renkte. */
body.in-battle #battle-log-right { display: none; }
body.in-battle .battle-logs {
left: 8px !important; right: 8px !important; width: auto; max-width: none;
top: 66px; bottom: auto; max-height: 20px; /* under Battle.tugBox's frame */
text-align: center !important;
-webkit-mask-image: none; mask-image: none;
}
body.in-battle .battle-logs .log-msg {
padding: 1px 8px !important;
font-size: 0.68rem; line-height: 1.5;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Komutan repliği `display:block` + 1.1rem ile iki satır açıyordu — şeritte hepsi
tek satırın parçası. */
body.in-battle .battle-logs .log-msg * {
display: inline !important; font-size: inherit !important; margin: 0 !important;
}
}
/* Alt şeritte "Teslim Ol" düğmesi duruyor: kumanda onun **üstünde** başlar,
yoksa ⚔️ düğmesi teslim düğmesini eziyordu (ölçüldü: şerit 59 px). */
/* Kumanda ölçüsü tek yerde (#86): 116/74 px 345 px'lik bir arenanın alt yarısını
kaplıyordu. Arena artık tam ekran ama kumanda yine de parmağa göre, ekrana göre
değil — büyüyen ekranda büyümesi gerekmiyor. */
:root {
--tui-lift: calc(66px + env(safe-area-inset-bottom));
/* Measured too small for a thumb in practice (#132 mobile report): 92/60 → 116/74. */
--tui-stick: 116px;
--tui-btn: 74px;
}
#tstick {
position: absolute;
left: 18px; bottom: var(--tui-lift);
width: var(--tui-stick); height: var(--tui-stick);
border-radius: 50%;
background: radial-gradient(circle, rgba(212,175,55,0.14), rgba(0,0,0,0.42));
border: 2px solid rgba(212,175,55,0.45);
touch-action: none;
z-index: 30;
}
#tastick {
position: absolute;
right: 18px; bottom: var(--tui-lift);
width: var(--tui-stick); height: var(--tui-stick);
border-radius: 50%;
background: radial-gradient(circle, rgba(255,120,90,0.16), rgba(0,0,0,0.42));
border: 2px solid rgba(255,140,110,0.5);
touch-action: none;
z-index: 30;
}
/* Ne işe yaradığı çubuğun üstünde yazsın — düğmeden yazı sökülmez kuralının çubuk hâli */
#tastick::after {
content: '⚔️';
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem; opacity: 0.35; pointer-events: none;
}
#tstick-knob, #tastick-knob {
position: absolute; left: 50%; top: 50%;
width: calc(var(--tui-stick) * 0.42); height: calc(var(--tui-stick) * 0.42);
margin: calc(var(--tui-stick) * -0.21) 0 0 calc(var(--tui-stick) * -0.21);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f0e3c0, #8a6a1c);
box-shadow: 0 3px 10px rgba(0,0,0,0.7);
pointer-events: none;
}
#tbtns {
position: absolute;
/* Sağ çubuk sağ köşede durduğu için blok düğmesi onun soluna geçti (#88) */
right: calc(18px + var(--tui-stick) + 14px); bottom: var(--tui-lift);
display: flex; gap: 14px;
z-index: 30;
}
#tbtns button {
width: var(--tui-btn); height: var(--tui-btn);
border-radius: 50%;
font-size: 1.55rem;
border: 2px solid rgba(212,175,55,0.5);
background: rgba(20,18,14,0.62);
color: #f0e3c0;
touch-action: none;
}
#tbtns #tb-block.on { background: rgba(90,150,220,0.55); border-color: #9fd0ff; }
/* Emirler çubuk ile düğmelerin **üstünde** tek sıra: sağ sütun hâlinde
dururken savaş kütüğünü ve arenanın yarısını kapatıyordu */
#tcmds {
position: absolute;
left: 0; right: 0; bottom: calc(var(--tui-lift) + var(--tui-stick) + 12px);
display: flex; justify-content: center; gap: 8px;
z-index: 30;
}
#tcmds button {
min-width: 92px; min-height: 44px; /* WCAG 2.5.5 — savaşın ortasında ıskalanmasın (#86) */
font-size: 0.78rem;
border: 1px solid rgba(212,175,55,0.4);
background: rgba(20,18,14,0.62);
color: #e8dcc0;
border-radius: var(--r-sm);
}
/* "Daha" düğmesi yalnız dar ekranın alt şeridinde işe yarar (#86) */
.sb-more { display: none; }
/* --- Dar ekran yerleşimi --- */
@media (max-width: 820px) {
:root { font-size: 15px; }
/* Kenar menüsü alta açılan şerit olur: dikey yer ekrana kalsın */
/* the bottom strip keeps clear of the iPhone home indicator (.screen's bottom stays 0) */
.content-area { flex-direction: column-reverse; gap: 0.5rem; padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); }
#sidebar {
width: auto;
flex-direction: row;
overflow-x: auto;
gap: 0.35rem;
padding: 0.35rem;
border-radius: var(--r-lg);
}
#sidebar .sb-title, #sidebar > div[style*="flex:1"] { display: none; }
/* Alt şeritte 8 sekme çok: Harita/Karakter/Grup/Envanter kalır, gerisi
"⋯ Daha" sayfasına iner (#86) — telefon uygulamalarının standart deseni. */
#sidebar .sb-extra { display: none; }
.sb-more { display: flex; }
.menu-btn {
flex-direction: column;
gap: 2px;
border-left-width: 0;
border-bottom: 3px solid transparent;
border-radius: var(--r-sm);
padding: 0.4rem 0.55rem;
min-width: 60px;
}
.menu-btn.active { border-bottom-color: var(--primary); }
.menu-btn kbd { display: none; }
.mb-lbl { font-size: 0.66rem; text-align: center; }
.mb-ico { font-size: 1.35rem; width: auto; }
/* Map view on a phone: chrome floats over a full-viewport map. The nav drops from the
left-centre strip to the standard bottom bar; the top bar pins to the top edge. */
body.view-map #sidebar {
left: 0; right: 0; top: auto; bottom: 0; transform: none;
width: auto; max-height: none; flex-direction: row;
border-radius: 0; padding: 0.35rem;
padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
}
body.view-map #sidebar .mb-lbl { display: block; }
body.view-map #sidebar .menu-btn { flex-direction: column; padding: 0.4rem 0.55rem; }
/* Lift the corner badge above the bottom nav strip so it isn't hidden behind it. */
body.view-map #map-hud { left: 14px; bottom: calc(64px + env(safe-area-inset-bottom)); }
/* Sefer çubuğu sarmalanır, rozetler küçülür */
#top-bar { padding: 0.35rem 0.4rem; gap: 0.25rem; }
/* Bottom-right is the bottom nav on a phone — the badge was sitting on top of it. */
#err-badge { bottom: var(--tui-lift); }
#top-bar .hud-sep { display: none; }
/* One row on a phone (2.0.0): time, money, food, party, health; the rest behind the chevron */
#top-bar .hud-more { display: none; }
body.hud-open #top-bar .hud-more { display: inline-flex; }
#hud-toggle { display: inline-flex; align-items: center; justify-content: center; }
.hud-group { padding: 2px; }
.hud-chip { padding: 0.25rem 0.45rem; gap: 0.3rem; }
.hud-col { min-width: 40px; }
#chip-time .hud-col { min-width: 52px; }
.hud-val { font-size: 0.82rem; }
.hud-sub { font-size: 0.56rem; }
/* Modal dar ekranda neredeyse tam genişlik ve kendi içinde kayar */
#modal-content, .modal-content {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
max-height: 88vh;
overflow-y: auto;
}
.view.glass-panel { padding: 0.7rem; }
/* Envanter: kuşanılan/çanta yan yana sıkışınca çanta kartları tek sütuna düşüyordu (#132)
— kuşanılan üste taşınır, çanta gerçek bir gride oturur. */
#inv-cols { flex-direction: column; gap: 1rem; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem; }
.inv-item { width: auto; padding: 0.6rem 0.4rem; }
/* Pazarın iki sütunu 375 px'te 165 px'e düşüyor, satırlar sarıyordu: alt alta */
#market-cols { flex-direction: column; gap: 1rem !important; }
/* Phone: the scene keeps a height its signs read at and slides sideways (2.0.0, round 3).
At 100% width a 390 px phone got a 112 px strip with 8 px signs. */
#scene-canvas { width: auto; max-width: none; height: clamp(190px, 52vw, 240px); }
.act-cards { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
#settlement-actions .act-card { grid-template-columns: auto 1fr; gap: 0.5rem; padding: 0.55rem; }
.act-card .ac-ic { width: 1.9rem; height: 1.9rem; }
.act-card .ac-tx b { font-size: 0.84rem; }
.act-card .ac-tx small { font-size: 0.68rem; }
.act-card .ac-mt { grid-column: 2; text-align: left; font-size: 0.7rem; }
.act-camp .act-cards { grid-template-columns: 1fr 1fr; }
.battle-logs { max-width: min(46vw, 220px); font-size: 0.72rem; }
/* Bozgun teklifi ("Düşman kaçıyor" + Bırak Gitsinler) Teslim Ol'un yanında tek satıra
sığmıyordu ve battle-ui hiç sarmadığı için sağa taşıp ekran dışında kalıyordu (#132):
artık gerektiğinde ikinci satıra iniyor. */
#battle-ui { flex-wrap: wrap; }
#rout-prompt { font-size: 0.8rem; gap: 0.4rem; }
#rout-prompt .btn { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
/* Künyedeki düğme sırası dar ekranda sığmıyordu: künye tam ene yayılır, satır sarar */
#map-hud { max-width: calc(100vw - 28px); }
/* Künye dört satıra çıkıp haritanın dörtte birini yiyordu: iki satıra iner. Diplomasi ve
"Sıradaki" "⋯ Daha"ya taşındı (aynı onclick), hız düğmesi kendi satırı yerine düğme
sırasının sonuna oturur. Düğmeler yazılı kalır (#86: yalnız ikon, "yazısız düğme" demekti). */
#map-hud { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 0.3rem; }
/* 2.1: the place sits in the same row as the buttons — one capsule, not two rows */
#map-terrain { flex: none; padding-right: 0.3rem; border-right: 1px solid rgba(212,175,55,0.22); }
#map-comp #btn-diplo, #map-comp #btn-track { display: none; }
#btn-map-speed { align-self: center; }
#map-comp { flex-wrap: wrap; }
#map-tooltip { max-width: 78vw; }
/* Sabit köşe panelleri dar ekranda birbirini ezmesin */
#prisoner-ui, #siege-ui, #raid-ui, #wait-ui { max-width: calc(100vw - 20px); }
}
/* --- Dar telefon (iPhone 14 ve altı): 390 px'e sığdır (#86) ---
Ölçüldü: sefer çubuğu 123 px (pencerenin %19'u, 8 rozet 3 satır), menü şeridi
scrollWidth 530 / clientWidth 372 — son üç düğme (Kayıtlar/Ses/Ayarlar) ekran
dışındaydı ve kaydırma işareti yoktu. */
@media (max-width: 430px) {
/* Rozetin alt yazısı (dinar/nam/erzak) ikonun yanında zaten belli; yalnız
saat kalır, çünkü gün numarası tek başına saati söylemiyor. */
.hud-sub { display: none; }
#chip-time .hud-sub { display: block; }
#top-bar { padding: 0.25rem 0.3rem; gap: 0.2rem; flex-wrap: nowrap; }
/* 412 px holds four values and the chevron on one row; health joins the fold */
#top-bar .hud-more-narrow { display: none; }
body.hud-open #top-bar { flex-wrap: wrap; }
body.hud-open #top-bar .hud-more-narrow { display: inline-flex; }
/* a tray whose every chip is folded away would show as an empty sliver */
body:not(.hud-open) #top-bar .hud-group:not(:has(> .hud-chip:not(.hud-more):not(.hud-more-narrow))) { display: none; }
#hud-toggle { width: 36px; height: 36px; flex: none; }
.hud-chip { padding: 0.2rem 0.35rem; gap: 0.25rem; }
.hud-col { min-width: 0; }
#chip-time .hud-col { min-width: 44px; }
/* Beş sekme şeridi eşit böler: 364 px içerik → düğme başına ~72 px, hepsi görünür
(eskiden 8 düğme scrollWidth 530 / clientWidth 372 idi, üçü ekran dışındaydı) */
#sidebar { gap: 2px; padding: 0.2rem; }
.menu-btn { flex: 1 1 0; min-width: 44px; padding: 0.3rem 0.1rem; }
.mb-lbl { font-size: 0.62rem; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mb-ico { font-size: 1.25rem; }
/* Harita künyesi 407 px'lik tuvalin 137'sini yiyordu (#86): punto küçülünce
dört düğme de tek satıra iner, metinleri yerinde kalır (ikona indirmek
"düğmede yazı yok" demekti). Dokunma hedefi yine 44 px. */
#map-hud { font-size: 0.66rem; padding: 0.3rem 0.4rem; }
#map-comp { gap: 1px; }
/* One capsule row at 412 px (2.1): the troop count lives on the party screen, and the
terrain's speed shrinks to its bare percentage */
#map-comp > span, #map-terrain .mt-long { display: none; }
#map-terrain { letter-spacing: 0; gap: 0.25rem; }
#map-terrain .mt-short { display: inline; margin-left: 0.25rem; font-family: 'Inter', 'Vazirmatn', sans-serif; font-weight: 600; color: var(--text-muted); }
#map-comp button {
font-size: 0.6rem; margin-left: 0.15rem; padding: 1px 4px; gap: 2px;
}
#map-hud { column-gap: 0.2rem; padding: 0.3rem; }
#map-comp { gap: 3px; }
#map-comp button { margin-left: 0; }
#map-terrain { padding-right: 0.25rem; }
#map-comp #btn-points .i { display: none; } /* its glow already marks it; the words stay */
#btn-map-speed { font-size: 0.62rem; padding: 1px 6px; }
}
/* Yatay tutulan telefon: dikey yer çok az, üst çubuk daha da incelir */
@media (max-height: 480px) and (pointer: coarse) {
#top-bar { padding: 0.2rem 0.35rem; }
.hud-sub { display: none; }
#sidebar { padding: 0.2rem; }
.mb-lbl { display: none; }
}
/* --- Başlangıç ekranı dar ekranda --- */
@media (max-width: 820px) {
#start-screen { padding: 1rem; justify-content: flex-start; padding-top: calc(2.5rem + var(--safe-top)); }
#start-screen h1 { font-size: clamp(2.6rem, 15vw, 5rem); letter-spacing: 3px; }
#start-screen .title-container { margin-bottom: 1.5rem; }
#start-screen p { font-size: 1.25rem; }
.ornament { width: min(100%, 340px); height: 26px; margin: 10px auto; }
#start-screen .form-group { padding: 1.3rem; width: 100%; max-width: 420px; }
#start-screen .form-group > div[style] {
position: static !important;
flex-wrap: wrap;
gap: 0.5rem !important;
}
.start-actions { gap: 0.5rem; margin-top: 1.2rem; }
#start-screen .start-act { font-size: 0.9rem; padding: 0.7rem 0.95rem; }
/* the glow stays inside the screen (130% of a full-width title ran 22px past the edge) */
#start-screen .title-container::before { width: 100%; }
/* a phone stacks each lore entry: portrait on top, the text under it at full width */
.lore h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.lore-list { gap: 1rem; }
.lore-row { flex-direction: column; gap: 0.8rem; padding: 1rem; text-align: center; }
.lore-row h3 { font-size: 1.25rem; }
.lore-row p { font-size: 1.05rem; }
.lore-close { margin-top: 1.2rem; }
}
/* A phone with its browser bars showing (iPhone Safari: 390×664) had 796px of start screen
in 664 and scrolled; the ornaments go and the gaps close, so it fits down to ~660px. */
@media (max-width: 820px) and (max-height: 760px) {
#start-screen { padding-top: calc(1rem + var(--safe-top)); }
#start-screen .ornament { display: none; }
#start-screen .title-container { margin-bottom: 1rem; }
#march-canvas { margin-top: 0.6rem; }
#start-screen .form-group { padding: 1rem; }
#start-screen .start-actions, #start-screen #lang-row { margin-top: 0.8rem; }
/* six actions (Demircilik, 2.5.0) in two rows, not three */
#start-screen .start-act { padding: 0.55rem 0.75rem; gap: 0.35rem; }
#start-screen #ver-tag { margin-top: 0.6rem; }
}
/* ============================================================
DİL SEÇİCİ
============================================================ */
#lang-ask {
position: fixed; inset: 0; z-index: 500;
display: flex; align-items: center; justify-content: center;
background: rgba(6,8,10,0.92);
}
#lang-ask.hidden { display: none; }
.lang-ask-box { text-align: center; padding: 1.5rem; }
.lang-ask-box h2 {
font-family: 'Cinzel', 'Vazirmatn', serif; font-size: 2.6rem;
color: var(--primary); letter-spacing: 3px; margin-bottom: 0.3rem;
}
.lang-ask-box p { color: var(--text-muted); margin-bottom: 1.6rem; letter-spacing: 1px; }
#lang-ask-row, #lang-row { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
#lang-row { margin-top: 1.2rem; }
.lang-btn {
display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
min-width: 96px; min-height: 44px;
padding: 0.7rem 0.9rem;
border: 1px solid rgba(212,175,55,0.35);
border-radius: var(--r-md);
background: rgba(20,18,14,0.6);
color: #e8dcc0;
cursor: pointer;
font-size: var(--fs-md);
}
.lang-btn .lang-flag { font-size: 2rem; line-height: 1; }
.lang-btn:hover { border-color: var(--primary); background: rgba(40,34,20,0.7); }
.lang-btn.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
/* Başlangıç ekranındaki sıra daha küçük: oyunu değil ayarı temsil eder */
#lang-row .lang-btn { min-width: 68px; padding: 0.5rem 0.6rem; font-size: 0.8rem; }
#lang-row .lang-flag { font-size: 1.3rem; }
/* --- HAFİF MOD (body.lite) ---
`Game.applySettings()` sınıfı koyar; tek anahtar `Game.opt('lite')` ("Cihaza göre"
telefon/tablette kendiliğinden açar). Buradaki iş tamamen compositor'a bakar:
telefonda kasmanın kaynağı JS değil, her karede yeniden hesaplanan blur ve
büyük yayılımlı gölgelerdir. Cam görünüm blur yerine daha opak zeminle korunur. */
body.lite .glass-panel,
body.lite #modal-overlay,
body.lite #start-screen .form-group,
body.lite #top-bar,
body.lite #sidebar {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.lite .glass-panel { background: rgba(16,17,22,0.94); box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
body.lite #modal-overlay { background: rgba(6,6,10,0.82); }
/* Sürekli dönen animasyonlar kare başına bir kompozit katmanı demek */
body.lite #map-comp #btn-points, body.lite .fx-flash, body.lite .fx-flash-bad { animation: none; }
body.lite #map-view, body.lite #battle-view { box-shadow: none; }
/* --- Öğretici (#87) ---
Işık halkası 9999px'lik kutu gölgesiyle yapılır: hem hedefi çerçeveler hem
ekranın geri kalanını karartır, ayrı bir perde elemanı gerekmez. */
#coach-ring {
position: fixed;
border: 2px solid var(--primary, #d4af37);
border-radius: var(--r-md);
box-shadow: 0 0 0 9999px rgba(4,5,9,0.66), 0 0 18px rgba(212,175,55,0.55);
pointer-events: none; /* halka tıklamayı yutmaz, altındaki arayüz görünür kalır */
z-index: 300;
}
#coach-box {
position: fixed;
z-index: 301;
width: min(330px, calc(100vw - 24px));
padding: 0.9rem 1rem;
border: 1px solid rgba(212,175,55,0.55);
border-radius: var(--r-lg);
background: rgba(18,19,26,0.97);
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
#coach-box.mid { left: 50%; top: 50%; transform: translate(-50%, -50%); }
#coach-box h4 { color: var(--primary, #d4af37); margin-bottom: 0.4rem; font-size: 1.05rem; }
#coach-box p { font-size: var(--fs-sm); line-height: 1.45; color: #e7e2d4; }
#coach-box .coach-row {
display: flex; align-items: center; gap: 0.5rem;
margin-top: 0.9rem;
}
#coach-box .coach-row span { flex: 1; font-size: var(--fs-xs); color: var(--text-muted); }
#coach-box .coach-row .btn { min-height: 44px; padding: 0.4rem 0.9rem; }
/* Turnuva eşleşme cetveli (#122). Four columns, each a round; the last is the champion.
Wide on a phone, so the whole board scrolls inside itself instead of the page. */
.tbr {
display: flex; gap: 6px; overflow-x: auto; padding: 0.4rem 0 0.6rem;
margin: 0.6rem 0; -webkit-overflow-scrolling: touch;
}
.tbr-col { display: flex; flex-direction: column; min-width: 112px; flex: 1; }
.tbr-cells { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 4px; }
.tbr-hd {
font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-muted); text-align: center; margin-bottom: 2px;
}
.tbr-c {
display: flex; align-items: center; gap: 0.4rem;
padding: 0.3rem 0.45rem; border: 1px solid var(--panel-border); border-radius: var(--r-xs);
background: rgba(255,255,255,0.03); font-size: var(--fs-xs); min-height: 30px;
}
.tbr-c .tbr-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbr-c .tbr-l { color: var(--text-muted); }
.tbr-c.me { border-color: var(--primary); color: var(--primary); background: rgba(212,175,55,0.10); }
.tbr-c.out { opacity: 0.4; text-decoration: line-through; }
.tbr-c.tbr-empty { border-style: dashed; opacity: 0.25; }
/* The win visibly moves into the box above: the cell drops into place from the column before. */
.tbr-c.adv { animation: tbr-adv 0.45s ease-out both; }
@keyframes tbr-adv {
from { opacity: 0; transform: translate(-16px, 10px); }
to { opacity: 1; transform: none; }
}
/* On a phone the four columns must all fit: a champion column parked off the right edge is
the one box the player actually wants to see. Names truncate, the shape survives. */
@media (max-width: 430px) {
.tbr { gap: 3px; }
.tbr-col { min-width: 66px; }
.tbr-c { padding: 0.25rem 0.3rem; gap: 0.2rem; font-size: 10px; }
.tbr-hd { font-size: 9px; letter-spacing: 0.02em; }
}
/* --- Pazar iskeleti (#103) ---
Satırların ve durum panelinin görünümü burada hazır; app.js `openMarket`/`renderMarket`
bu class/id'leri satır üretirken kullanacak (JS bağlaması ayrı iş). */
.market-status-bar {
display: flex; flex-wrap: wrap; gap: 0.5rem;
margin-bottom: 1rem; padding: 0.6rem 0.8rem;
background: rgba(0,0,0,0.3); border: 1px solid var(--panel-border); border-radius: var(--r-md);
}
.market-status-chip {
display: flex; flex-direction: column; align-items: center;
min-width: 64px; flex: 1;
font-size: var(--fs-xs); color: var(--text-muted);
}
.market-status-chip b { font-size: var(--fs-md); color: var(--text-color); }
.market-row {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--panel-border);
}
.market-row-name { flex: 1; font-size: var(--fs-sm); }
.market-row-price { font-size: var(--fs-xs); color: var(--text-muted); min-width: 56px; text-align: right; }
.market-qty-btns { display: flex; gap: 0.3rem; }
.market-qty-btn {
min-width: 2.4rem; min-height: 2rem; padding: 0.2rem 0.5rem;
font-size: var(--fs-xs); border-radius: var(--r-sm);
background: rgba(212,175,55,0.1); border: 1px solid var(--panel-border);
color: var(--text-color); cursor: pointer;
}
.market-qty-btn:hover { background: rgba(212,175,55,0.22); border-color: var(--primary); }
.market-qty-btn.active { background: rgba(212,175,55,0.3); border-color: var(--primary); color: var(--primary); }
/* Çanta: masaüstünde tek tek yan yana sıralanan kartlar (#132's mobile grid needs its own rule) */
.inv-grid { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.inv-item {
padding: 0.8rem; background: rgba(0,0,0,0.3);
border: 1px solid var(--panel-border); border-radius: var(--r-sm);
width: 120px; text-align: center;
}
/* --- Envanter equip silüeti (#kenar menüleri) ---
5 kare yerine insan + at silüeti üzerinde konumlanan drop-zone slotlar. Slot
kimlikleri equipment nesnesiyle birebir: weapon/shield/armor/helmet/gloves/boots/horse.
app.js DOM'u basıp `data-slot` içine ekipman ikonunu koyacak, sürükle-bırak JS'i ayrı iş. */
.equip-figures {
display: flex; gap: 1.2rem; flex-wrap: wrap;
justify-content: center; margin-bottom: 1rem;
}
.equip-figure {
position: relative;
width: 180px; height: 320px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--panel-border); border-radius: var(--r-md);
}
.equip-figure::before {
content: '🧍';
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 9rem; opacity: 0.18; pointer-events: none;
}
.equip-figure.horse::before { content: '🐴'; }
.equip-slot {
position: absolute;
width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
background: rgba(0,0,0,0.4);
border: 2px dashed var(--panel-border);
border-radius: var(--r-md);
cursor: pointer;
}
.equip-slot:hover, .equip-slot.drag-over { border-color: var(--primary); background: rgba(212,175,55,0.16); }
.equip-slot.filled { border-style: solid; border-color: var(--primary); }
.equip-slot[data-slot="helmet"] { top: 8px; left: 50%; transform: translateX(-50%); }
.equip-slot[data-slot="armor"] { top: 118px; left: 50%; transform: translateX(-50%); }
.equip-slot[data-slot="weapon"] { top: 118px; right: 10px; }
.equip-slot[data-slot="shield"] { top: 118px; left: 10px; }
.equip-slot[data-slot="gloves"] { top: 190px; left: 10px; }
.equip-slot[data-slot="boots"] { bottom: 12px; left: 50%; transform: translateX(-50%); }
.equip-slot[data-slot="horse"] { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; font-size: 1.8rem; }
@media (max-width: 430px) {
.equip-figure { width: 148px; height: 260px; }
.equip-figure::before { font-size: 7rem; }
.equip-slot { width: 38px; height: 38px; font-size: 1.15rem; }
.equip-slot[data-slot="armor"] { top: 96px; }
.equip-slot[data-slot="weapon"], .equip-slot[data-slot="shield"] { top: 96px; }
.equip-slot[data-slot="gloves"] { top: 150px; }
}
/* --- F11 tam ekran ipucu ---
Göster/gizle app.js işi (#f11-hint'in .hidden'ını Game açar/kapar); burada yalnız yer var. */
#f11-hint {
position: fixed;
top: calc(env(safe-area-inset-top) + 10px);
left: 50%; transform: translateX(-50%);
z-index: 250;
display: flex; align-items: center; gap: 0.6rem;
padding: 0.5rem 0.7rem 0.5rem 1rem;
font-size: var(--fs-sm);
border-radius: var(--r-md);
}
#f11-hint.hidden { display: none; }
#f11-hint kbd {
font-family: inherit; font-size: var(--fs-xs);
padding: 0.1rem 0.4rem; border: 1px solid var(--panel-border); border-radius: var(--r-xs);
background: rgba(0,0,0,0.35);
}
#f11-hint-close {
background: none; border: none; color: var(--text-muted);
font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.2rem;
}
#f11-hint-close:hover { color: var(--primary); }
@media (max-width: 820px), (pointer: coarse) {
/* Dokunmatikte F11 anlamsız (tam ekran API'si farklı çalışır): app.js göstermesin diye
CSS burada zorlamıyor, sadece dar ekranda ipucu haritayı örtmesin diye üst şeride iner. */
#f11-hint { top: auto; bottom: calc(env(safe-area-inset-bottom) + 8px); }
}
/* A finished quest waiting for its hand-in: a green dot on the Quests button, visible on the
collapsed map sidebar too, where the label is hidden. */
.menu-btn.has-turnin .mb-ico { position: relative; }
.menu-btn.has-turnin .mb-ico::after {
content: ''; position: absolute; top: -2px; right: -4px; width: 8px; height: 8px;
border-radius: 50%; background: #2ecc71; box-shadow: 0 0 6px #2ecc71;
}
/* Timed decision (#121): the bar empties over the decision's seconds (duration set inline).
No fill-mode on purpose — under reduced motion the animation ends at once and the bar
stays full, while the seconds counter below it keeps the clock readable. */
.ev-timer { height: 6px; margin-top: 1rem; border-radius: var(--r-pill); background: rgba(255,255,255,0.1); overflow: hidden; }
.ev-timer > div { height: 100%; background: var(--danger); transform-origin: left; animation: evTimer linear; }
@keyframes evTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* A tablet-width panel already shows the scene at a readable height: sliding it for the last
few dozen pixels only puts an arrow over a building, so from here up it fits the width. */
@media (min-width: 660px) and (max-width: 820px) {
#scene-canvas { width: 100%; height: auto; }
}
/* ============================================================
2.1 — MOTION POLISH. Every one of these is a CSS animation (or a Web Animation started from
Game.fly/flourish/curtain), so body.reduced-motion above stops them all; none takes a tap.
============================================================ */
/* Walking into a settlement: the scene rises into view, the cards follow one by one */
#settlement-view.entering #scene-wrap { animation: sceneRise 0.55s var(--ease-soft) both; }
@keyframes sceneRise { from { opacity: 0; transform: translateY(10px) scale(0.985); filter: brightness(1.35); } to { opacity: 1; transform: none; filter: none; } }
#settlement-view.entering .act-card { animation: cardIn 0.42s var(--ease-soft) both; animation-delay: calc(var(--i, 0) * 40ms + 140ms); }
#settlement-view.entering .act-group h4 { animation: cardIn 0.4s var(--ease-soft) both 0.1s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Cards answer the pointer: a lift and a gold edge on hover (a mouse), a give on press */
.act-card { transition: transform 0.16s var(--ease-soft), box-shadow 0.16s, border-color 0.16s, background-color 0.16s; }
.act-card .ac-ic { transition: transform 0.2s var(--ease-soft), box-shadow 0.2s; }
@media (hover: hover) {
.act-card:not(:disabled):hover { transform: translateY(-2px); border-color: rgba(212,175,55,0.55);
box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 16px rgba(212,175,55,0.14); }
.act-card:not(:disabled):hover .ac-ic { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 10px rgba(212,175,55,0.35); }
}
.act-card:not(:disabled):active { transform: translateY(0) scale(0.975); transition-duration: 0.07s; }
/* Something flying across the screen (Game.fly), and the pop where it lands */
.fx-fly { position: fixed; z-index: 2200; pointer-events: none; width: 34px; height: 34px; display: grid; place-items: center;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7)); color: var(--primary); }
.fx-fly img, .fx-fly .ii { width: 30px; height: 30px; image-rendering: pixelated; }
.fx-fly svg.i { width: 24px; height: 24px; }
@keyframes fxPop { 0% { transform: scale(1); } 35% { transform: scale(1.14); box-shadow: 0 0 0 3px rgba(212,175,55,0.45); } 100% { transform: scale(1); } }
.fx-pop { animation: fxPop 0.45s var(--ease-soft); }
/* A gold banner from the top: a level, a finished quest (Game.flourish) */
#flourish { position: fixed; z-index: 2100; left: 50%; top: calc(var(--safe-top, 0px) + 14px); pointer-events: none;
display: none; align-items: center; gap: 0.7rem; padding: 0.6rem 1.2rem 0.6rem 0.7rem; border-radius: 999px;
background: linear-gradient(180deg, #2a2112, #15110a); border: 1px solid rgba(240,200,90,0.8);
box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 26px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,236,170,0.25);
transform: translateX(-50%); max-width: calc(100vw - 24px); }
#flourish.on { display: flex; animation: flIn 3s var(--ease-soft) forwards; }
@keyframes flIn { 0% { opacity: 0; transform: translate(-50%, -30px) scale(0.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.03); }
18% { transform: translate(-50%, 0) scale(1); } 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -14px); } }
#flourish .fl-ic { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; flex: none; color: #1a1406;
background: radial-gradient(circle at 35% 30%, #ffe9a0, #d4af37 60%, #8a6a1a); box-shadow: 0 0 14px rgba(255,210,100,0.6); }
#flourish .fl-ic svg.i { width: 1.3rem; height: 1.3rem; }
#flourish .fl-tx { display: flex; flex-direction: column; min-width: 0; }
#flourish b { font: 700 1.05rem/1.15 'Cinzel', 'Vazirmatn', serif; color: #ffe08a; letter-spacing: 0.04em; }
#flourish small { font: 500 var(--fs-xs)/1.3 'Inter', 'Vazirmatn', sans-serif; color: #d8ccb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* six sparks thrown off the medal */
#flourish i { position: absolute; left: 1.85rem; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #ffe08a; opacity: 0; }
#flourish.on i { animation: flSpark 0.9s ease-out 0.25s both; }
#flourish i:nth-of-type(1) { --dx: -26px; --dy: -22px; } #flourish i:nth-of-type(2) { --dx: 18px; --dy: -26px; }
#flourish i:nth-of-type(3) { --dx: 30px; --dy: 4px; } #flourish i:nth-of-type(4) { --dx: -30px; --dy: 10px; }
#flourish i:nth-of-type(5) { --dx: 6px; --dy: 28px; } #flourish i:nth-of-type(6) { --dx: -12px; --dy: -34px; }
@keyframes flSpark { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); } }
/* Into battle: dark on the field, a title that rises and fades (Game.curtain) */
#curtain { position: fixed; inset: 0; z-index: 1500; pointer-events: none; display: none; place-items: center;
background: radial-gradient(ellipse at center, rgba(8,6,4,0.55) 0%, rgba(4,3,2,0.97) 72%); }
#curtain.on { display: grid; animation: ctOut 1.25s ease-in forwards; }
@keyframes ctOut { 0%, 38% { opacity: 1; } 100% { opacity: 0; } }
#curtain .ct-box { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; animation: ctTitle 1.25s var(--ease-soft) forwards; }
@keyframes ctTitle { 0% { opacity: 0; transform: scale(1.3); letter-spacing: 0.5em; } 28% { opacity: 1; transform: scale(1); letter-spacing: 0.14em; }
75% { opacity: 1; } 100% { opacity: 0; transform: scale(0.97); } }
#curtain .ct-ic { color: var(--primary); } #curtain .ct-ic svg.i { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 0 10px rgba(212,175,55,0.5)); }
#curtain b { font: 700 clamp(1.7rem, 6vw, 2.8rem)/1 'Cinzel', 'Vazirmatn', serif; color: #f2d27a; text-shadow: 0 0 18px rgba(212,175,55,0.45), 0 3px 8px #000; letter-spacing: 0.14em; }
#curtain small { font: 500 var(--fs-sm)/1.3 'Inter', 'Vazirmatn', sans-serif; color: #cfc4a8; letter-spacing: 0.08em; text-transform: uppercase; }
/* Character creation: the hero as it is being built (2.1, Game.drawHero) */
.cr-head { display: flex; gap: 1rem; align-items: center; }
.cr-head-tx { flex: 1; min-width: 0; }
.cr-head-tx h3 { margin-top: 0; }
.cr-hero { flex: none; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.cr-hero canvas { width: 112px; height: 112px; image-rendering: pixelated; border-radius: var(--r-md);
background: radial-gradient(ellipse at 50% 80%, rgba(76,116,57,0.25), rgba(0,0,0,0) 70%), #14120e;
border: 1px solid rgba(212,175,55,0.3); box-shadow: inset 0 0 18px rgba(0,0,0,0.6); }
.cr-hair { margin-top: 0.35rem; width: 112px; min-height: 40px; padding: 0.25rem 0.35rem; font-size: var(--fs-xs); line-height: 1.15; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; white-space: normal; text-align: left; }
.cr-hair svg.i { width: 13px; height: 13px; flex: none; }
.cr-hero-nm { font: 600 var(--fs-xs)/1.2 'Cinzel', 'Vazirmatn', serif; color: var(--primary); max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 430px) {
.cr-head { gap: 0.7rem; }
.cr-hero, .cr-hero-nm { width: 84px; max-width: 84px; }
.cr-hair { width: 84px; padding: 0.25rem 0.2rem; font-size: 0.62rem; white-space: normal; line-height: 1.1; }
.cr-hero canvas { width: 84px; height: 84px; }
}
/* Round 1's town screen, finished (2.1): the line under the name, numbered cards, prices you can't pay */
#settlement-name { margin-bottom: 0.2rem; }
.set-sub { margin: 0 0 0.9rem; font: 500 var(--fs-sm)/1.4 'Inter', 'Vazirmatn', sans-serif; color: var(--text-muted); }
.set-sub .ss-dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.4em; vertical-align: 0.05em; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); }
@media (max-width: 430px) { .set-sub { font-size: var(--fs-xs); margin-bottom: 0.6rem; } }
.act-card { position: relative; }
.ac-kbd { position: absolute; top: 6px; right: 8px; font: 600 0.62rem/1 'Inter', 'Vazirmatn', sans-serif; color: #8a8173;
border: 1px solid rgba(236,230,218,0.14); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; background: rgba(0,0,0,0.25); }
body.touch .ac-kbd { display: none; }
.act-card.act-poor { opacity: 0.62; }
.act-card.act-poor .ac-mt { color: var(--danger); }
/* Phone battle (2.1, round 1): no black strip under the field. The bar floats over the canvas,
see-through; Surrender moved into the corner pause button's menu (Battle.pauseMenu); the
"enemy flees" prompt sits under the power bar; the sticks go half-transparent until touched. */
#btn-bpause { display: none; }
@media (pointer: coarse) {
#battle-view { position: relative; }
#battle-ui { position: absolute; inset: 0; padding: 0; background: none; border: 0; pointer-events: none; z-index: 31; }
/* the sticks no longer have a 59 px strip to clear: they drop to the thumb's natural rest */
#touch-ui { --tui-lift: calc(24px + env(safe-area-inset-bottom)); }
#battle-ui > * { pointer-events: auto; }
#battle-ui > .battle-logs { pointer-events: none; }
#btn-surrender { display: none; }
#btn-bpause { display: grid; place-items: center; position: absolute; left: 8px; top: 10px; width: 44px; height: 44px; min-width: 44px; padding: 0;
border-radius: 50%; background: rgba(12,12,16,0.72); border: 1px solid rgba(212,175,55,0.5); color: var(--primary); }
#btn-bpause svg.i { width: 18px; height: 18px; }
#rout-prompt { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap;
background: rgba(12,14,10,0.82); border: 1px solid rgba(159,224,160,0.45); border-radius: 999px; padding: 0.3rem 0.4rem 0.3rem 0.8rem; }
#tstick, #tastick, #tbtns button, #tcmds button { transition: opacity 0.2s; }
#tstick:not(:active), #tastick:not(:active) { opacity: 0.72; }
#tcmds button, #tbtns button:not(:active) { opacity: 0.82; }
}
/* ============ BANDIT LAIR (2.2.0) ============
A full-screen scene like the battle: #lair-view covers the viewport while it is up (the
top bar and sidebar are hidden by body.in-battle). lair.js builds everything inside it. */
#lair-view { padding: 0; }
#lair-view.active { position: fixed; inset: 0; z-index: 30; display: block; background: #050407; overflow: hidden; border-radius: 0; animation: none; }
#lair-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#lair-hud { position: absolute; left: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 0; display: flex; flex-direction: column;
gap: 6px; align-items: flex-start; pointer-events: none; z-index: 5; max-width: calc(100% - 170px); }
.lchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(10,9,8,.78);
border: 1px solid rgba(236,230,218,.1); font: 600 var(--fs-xs)/1.2 'Inter', 'Vazirmatn', system-ui, sans-serif; white-space: nowrap; color: var(--text-color); }
.lchip b { color: var(--primary-hover); font-variant-numeric: tabular-nums; }
.lchip[hidden] { display: none; } /* its display: inline-flex would otherwise outrank the attribute */
.lchip.st-crouch { border-color: rgba(108,201,138,.5); color: #b9ecc9; }
.lchip.st-run { border-color: rgba(240,182,74,.6); color: #ffd99a; }
.lhp { width: 92px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.lhp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b8423c, #e0605a); transition: width .2s; }
#lair-goal { font: 500 var(--fs-xs)/1.35 'Inter', 'Vazirmatn', system-ui, sans-serif; color: var(--text-muted); max-width: 380px; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#lair-goal b { color: var(--text-color); font-weight: 600; }
#lair-goal .lmsg { color: var(--primary-hover); }
#lair-mini { position: absolute; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 5; border-radius: 8px;
border: 1px solid var(--panel-border); background: rgba(8,7,6,.82); image-rendering: pixelated; pointer-events: none; }
#lair-pausebtn { position: absolute; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 112px); z-index: 6; width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--panel-border); background: rgba(10,9,8,.8); color: var(--primary-hover); display: grid; place-items: center; cursor: pointer; font-weight: 700; }
#lair-banner { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 86px); transform: translateX(-50%); z-index: 6;
padding: 7px 16px; border-radius: var(--r-pill); font: 700 13px/1 'Inter', 'Vazirmatn', sans-serif; letter-spacing: .06em; text-transform: uppercase;
background: rgba(120,24,20,.9); border: 1px solid #ff8a7a; color: #fff; pointer-events: none; white-space: nowrap; }
#lair-banner.calm { background: rgba(60,48,18,.9); border-color: var(--primary); }
#lair-prompt { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); z-index: 6;
padding: 7px 14px; border-radius: var(--r-sm); background: rgba(10,9,8,.86); border: 1px solid var(--panel-border); font: 600 13px/1.2 'Inter', 'Vazirmatn', sans-serif; pointer-events: none; white-space: nowrap; }
#lair-keys { position: absolute; left: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 5; font: 500 11px/1.6 'Inter', 'Vazirmatn', sans-serif; color: #736c61; pointer-events: none; }
#lair-keys kbd { font: 700 10px/1 'Inter', 'Vazirmatn', sans-serif; padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(236,230,218,.12); color: var(--text-muted); }
#lair-touch { display: none; }
body.touch #lair-keys { display: none; }
body.touch #lair-touch { display: block; }
#lair-stickzone { position: absolute; left: 0; bottom: 0; width: 55%; height: 55%; z-index: 4; touch-action: none; }
#lair-stick { position: fixed; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; z-index: 4; pointer-events: none;
border: 2px solid rgba(212,175,55,.45); background: radial-gradient(circle, rgba(212,175,55,.1), rgba(0,0,0,.35)); opacity: .75; }
#lair-knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f0e3c0, #8a6a1c); box-shadow: 0 3px 10px rgba(0,0,0,.7); }
#lair-tbtns { position: absolute; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 5; display: grid;
grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 12px; align-items: end; }
.ltb { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--panel-border); background: rgba(12,11,9,.72); color: var(--text-color);
font: 700 11px/1.1 'Inter', 'Vazirmatn', sans-serif; display: grid; place-items: center; text-align: center; padding: 4px; touch-action: none; }
.ltb.big { width: 78px; height: 78px; font-size: 12px; border-color: rgba(224,96,90,.6); }
.ltb.on { background: rgba(60,120,80,.55); border-color: #9fe0b0; }
.ltb.cancel { background: rgba(140,40,34,.8); border-color: #ff8a7a; color: #fff; }
.ltb.ctx { border-color: rgba(245,215,110,.7); color: var(--primary-hover); }
.ltb.ctx.idle { opacity: .4; }
.ltb.ctx.bad { border-color: #ff8a70; color: #ff8a70; }
#lair-act { grid-column: 1; grid-row: 1; } #lair-crouch { grid-column: 1; grid-row: 2; } #lair-throw { grid-column: 2; grid-row: 1; } #lair-atk { grid-column: 2; grid-row: 2; }
#lair-over { position: absolute; inset: 0; z-index: 20; overflow-y: auto; display: grid; place-items: center; padding: 18px 16px;
background: radial-gradient(ellipse at 50% 0%, rgba(42,33,22,.94) 0%, rgba(13,12,11,.96) 70%); }
#lair-over[hidden] { display: none; }
.lpanel { width: min(560px, 100%); display: grid; gap: 14px; }
.lpanel h2 { font: 700 clamp(24px, 6vw, 36px)/1.1 'Cinzel', 'Vazirmatn', Georgia, serif; color: var(--primary-hover); margin: 0; text-wrap: balance; }
.leyebrow { font: 600 11px/1 'Inter', 'Vazirmatn', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.llead, .lnote { color: var(--text-muted); margin: 0; }
.lnote { font-size: var(--fs-xs); }
.lrow { display: flex; flex-wrap: wrap; gap: 10px; }
.lres { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: rgba(18,16,13,.9); border: 1px solid var(--panel-border); border-radius: var(--r-sm); }
.lres td { padding: 7px 12px; border-bottom: 1px solid rgba(236,230,218,.08); }
.lres td:last-child { text-align: right; color: var(--primary-hover); font-weight: 600; }
.lres tr:last-child td { border-bottom: 0; }
/* the scouting card, inside the ordinary modal */
.lair-brief { display: grid; gap: 10px; text-align: left; }
.lair-brief h3 { margin: 2px 0 0; }
.lb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lb-help { width: 38px; height: 38px; padding: 0; border-radius: 50%; font-weight: 700; flex: none; }
.lb-lead { color: var(--text-muted); margin: 0; font-size: var(--fs-sm); }
.lb-intel { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: rgba(22,19,15,.9); border: 1px solid var(--panel-border); border-radius: var(--r-sm); padding: 12px; }
@media (max-width: 680px) { .lb-intel { grid-template-columns: 1fr; } }
.lb-intel ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: var(--fs-xs); line-height: 1.4; }
.lb-intel li.unk { color: #736c61; font-style: italic; }
.lb-intel li b { color: var(--primary-hover); }
.lb-t { color: var(--primary); font-size: var(--fs-sm); }
#lair-sketch { width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(236,230,218,.1); background: #0a0908; image-rendering: pixelated; }
.lb-ways { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.lb-way { text-align: left; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--panel-border); background: rgba(30,26,21,.95); color: var(--text-color); cursor: pointer; display: grid; gap: 4px; font: inherit; }
.lb-way:hover:not([disabled]) { border-color: var(--primary); }
.lb-way b { color: var(--primary-hover); }
.lb-way span { font-size: var(--fs-xs); color: var(--text-muted); }
.lb-way .lb-warn { color: #f0b64a; font-weight: 600; }
.lb-way[disabled] { opacity: .45; cursor: default; }
.lb-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* The step guide (2.11.1): one step at a time, the move it asks for played out above the words */
.sg { display: grid; gap: 10px; text-align: center; }
.sg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sg-dots { display: flex; gap: 5px; }
.sg-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(236,230,218,0.18); }
.sg-dots i.done { background: rgba(245,215,110,0.5); }
.sg-dots i.on { background: var(--primary); box-shadow: 0 0 8px rgba(245,215,110,.6); }
.sg-count { font-size: var(--fs-xs); color: var(--text-muted); }
.sg-demo { min-height: 74px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(0,0,0,0.28); padding: 10px; }
.sg-title { margin: 0; font-family: 'Cinzel', 'Vazirmatn', serif; color: var(--primary-hover); }
.sg-text { margin: 0; font-size: var(--fs-md); line-height: 1.45; text-wrap: balance; }
.sg-nav { display: flex; justify-content: space-between; gap: 10px; }
.sg-nav .btn { flex: 1; }
.sg-skip { justify-self: center; background: none; border: 0; color: var(--text-muted); font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; padding: 6px 10px; }
.sg-icon { font-size: 40px; }
.sg-hand { display: inline-block; font-size: 30px; line-height: 1; }
.sg-track { position: relative; display: block; border-radius: 99px; background: rgba(236,230,218,0.08); }
.sg-track.x { width: 180px; height: 10px; margin: 26px 0 30px; }
.sg-track.y { width: 10px; height: 64px; }
.sg-mover { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -20%); }
.sg-track.x .sg-mover { animation: sg-x 1.6s ease-in-out infinite alternate; }
.sg-track.y .sg-mover { animation: sg-y 1.4s ease-in-out infinite alternate; }
.sg-track.held .sg-hand { filter: drop-shadow(0 0 6px rgba(245,215,110,.9)); }
@keyframes sg-x { from { left: 8%; } to { left: 92%; } }
@keyframes sg-y { from { top: 0; } to { top: 100%; } }
.sg-press { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; }
.sg-press .sg-hand { position: relative; z-index: 1; }
.sg-ring { position: absolute; inset: 6px; border-radius: 50%; border: 3px solid var(--primary); opacity: 0; }
.sg-press.tap .sg-ring { animation: sg-tap 1.2s ease-out infinite; }
.sg-press.tap .sg-hand { animation: sg-tap-hand 1.2s ease-out infinite; }
.sg-press.hold .sg-ring { opacity: 1; border-color: transparent;
background: conic-gradient(var(--primary) var(--sg-fill, 0%), rgba(236,230,218,0.12) 0); animation: sg-hold 1.8s linear infinite;
-webkit-mask: radial-gradient(circle, transparent 55%, #000 57%); mask: radial-gradient(circle, transparent 55%, #000 57%); }
@property --sg-fill { syntax: ''; inherits: false; initial-value: 0%; }
@keyframes sg-tap { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes sg-tap-hand { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(4px); } }
@keyframes sg-hold { from { --sg-fill: 0%; } to { --sg-fill: 100%; } }
.sg-scale { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; font-size: var(--fs-sm); }
.sg-scale span { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 56px; }
.sg-scale i { width: 34px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); }
@media (prefers-reduced-motion: reduce) { .sg-track .sg-mover, .sg-press .sg-ring, .sg-press .sg-hand { animation: none; } .sg-press.tap .sg-ring { opacity: .8; } }
.lb-howto { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: var(--fs-sm); }
.lb-howto b { color: var(--primary-hover); }
/* ============ THE FORGE (2.5.0) ============
A full-screen scene like the lair: #forge-view covers the viewport while it is up. forge.js
builds everything inside it; the canvas holds a small pixel buffer scaled up whole. The crafts'
#craft-view (2.10.0, crafts.js) is the same scene and wears the same rules. */
#forge-view, #craft-view { padding: 0; }
#forge-view.active, #craft-view.active { position: fixed; inset: 0; z-index: 30; display: block; background: #050407; overflow: hidden; border-radius: 0; animation: none; }
#forge-canvas, #craft-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; image-rendering: pixelated; }
#forge-hud, #craft-hud { position: absolute; left: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 0; display: flex; flex-direction: column;
gap: 6px; align-items: flex-start; pointer-events: none; z-index: 5; max-width: calc(100% - 60px); }
#forge-hint, #craft-hint { font: 500 var(--fs-xs)/1.35 'Inter', 'Vazirmatn', system-ui, sans-serif; color: var(--text-muted); max-width: 420px; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#forge-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 10px/1.2 'Inter', 'Vazirmatn', sans-serif; color: var(--text-muted); text-shadow: 0 1px 2px #000; }
#forge-legend span { display: inline-flex; align-items: center; gap: 4px; }
#forge-legend i { width: 14px; height: 6px; border-radius: 2px; }
#forge-pausebtn, #craft-pausebtn { position: absolute; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 6; width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--panel-border); background: rgba(10,9,8,.8); color: var(--primary-hover); display: grid; place-items: center; cursor: pointer; font-weight: 700; }
#forge-msg, #craft-msg { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 32px); text-align: center;
padding: 7px 16px; border-radius: var(--r-sm); background: rgba(70,24,16,.88); border: 1px solid #ff9a6a; color: #fff; font: 600 13px/1.3 'Inter', 'Vazirmatn', sans-serif; pointer-events: none; }
#forge-msg[hidden], #craft-msg[hidden] { display: none; }
#forge-keys, #craft-keys { position: absolute; left: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 5; font: 500 11px/1.6 'Inter', 'Vazirmatn', sans-serif; color: #736c61; pointer-events: none; max-width: calc(100% - 330px); }
#forge-keys kbd, #craft-keys kbd { font: 700 10px/1 'Inter', 'Vazirmatn', sans-serif; padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(236,230,218,.12); color: var(--text-muted); }
body.touch #forge-keys, body.touch #craft-keys { display: none; }
#forge-btns, #craft-btns { position: absolute; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 5; display: flex; gap: 10px; align-items: flex-end; }
.fbtn { min-width: 84px; min-height: 52px; padding: 6px 12px; border-radius: var(--r-sm); border: 2px solid var(--panel-border); background: rgba(12,11,9,.8);
color: var(--text-color); font: 700 13px/1.1 'Inter', 'Vazirmatn', sans-serif; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.fbtn[hidden] { display: none; }
.fbtn.primary { border-color: rgba(120,190,230,.7); color: #cfeaff; }
.fbtn:disabled { opacity: .35; cursor: default; }
.fbtn.on { background: rgba(150,70,20,.7); border-color: #ffb070; }
#forge-pump { min-width: 96px; min-height: 64px; }
/* touch: one action bar along the bottom, equal buttons a thumb can't miss (right-aligned and
capped when the phone lies sideways, so it stays off the anvil) */
body.touch #forge-btns, body.touch #craft-btns { left: 12px; right: 12px; max-width: 520px; margin-left: auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
body.touch .fbtn { min-height: 64px; font-size: 16px; border-radius: 16px; background: rgba(16,12,10,.88); }
body.touch #forge-pump { min-width: 0; border-color: rgba(240,150,70,.65); }
@media (orientation: landscape) { body.touch #forge-btns, body.touch #craft-btns { max-width: 380px; } }
body.touch .fbtn.on { background: rgba(150,70,20,.85); }
#forge-over, #craft-over { position: absolute; inset: 0; z-index: 20; overflow-y: auto; display: grid; place-items: center; padding: 18px 16px;
background: radial-gradient(ellipse at 50% 0%, rgba(42,33,22,.94) 0%, rgba(13,12,11,.96) 70%); }
#forge-over[hidden], #craft-over[hidden] { display: none; }
@media (max-width: 820px) { #forge-legend { display: none; } }
/* the recipe window */
.forge-shop { display: grid; gap: 10px; }
.fs-fam { margin: 6px 0 0; color: var(--primary); font-size: var(--fs-sm); }
.fs-list { display: grid; gap: 6px; }
.fs-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px;
border-radius: var(--r-sm); background: rgba(22,19,15,.9); border: 1px solid var(--panel-border); }
.fs-row.locked { opacity: .55; }
.fs-ic { font-size: 22px; line-height: 1; }
.fs-tx { display: grid; gap: 2px; min-width: 0; }
.fs-tx small { color: var(--text-muted); font-size: var(--fs-xs); }
.fs-tx em { color: #f0b64a; font-style: normal; }
.fs-cost { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; justify-content: flex-end; }
.fs-short { color: #ff8a70; }
@media (max-width: 560px) {
.fs-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.fs-cost { grid-column: 2 / 4; justify-content: flex-start; grid-row: 2; }
}