/* Lodě — Výloha MojeGalanterka.cz */ :root { --glass: #6f93a8; --glass-dark: #4b6a7c; --glass-light: #a9c7d6; --frame: #2e4457; --frame-dark: #1d2c38; } /* Barevné motivy (Část C3): přepínané , výchozí = Modré sklo. * Motiv mění sklo a rám výlohy; kusy sortimentu zůstávají stejné. */ html[data-theme="mata"] { --glass: #6fada2; --glass-dark: #4a8177; --glass-light: #a3d2c6; --frame: #2b4a44; --frame-dark: #1b312c; } html[data-theme="ruzova"] { --glass: #c98a9a; --glass-dark: #a15d70; --glass-light: #e6b8c4; --frame: #5a2e3a; --frame-dark: #3a1c24; } :root { /* pokračování společných proměnných (na motivu nezávislých) */ --amber: #e0a838; --amber-dark: #b9861f; --coral: #e8735c; --coral-dark: #c9503a; --teal: #008080; --cream: #eef3f5; --ink: #24313b; --card: rgba(253, 251, 255, 0.96); --shadow: 0 8px 26px rgba(20, 34, 44, 0.28); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; margin: 0; padding: 0; min-height: 100%; height: 100%; overflow: hidden; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--ink); background: var(--cream); } #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; } /* ---------- Horní lišta ---------- */ #topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: linear-gradient(180deg, rgba(29, 44, 56, 0.96), rgba(20, 31, 40, 0.94)); box-shadow: 0 3px 12px rgba(10, 16, 22, 0.35); color: #eef6fa; } .brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .brand h1 { margin: 0; font-size: 1.25rem; letter-spacing: 2px; font-weight: 800; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); white-space: nowrap; } .brand .vs { font-size: 0.85rem; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand a, .shop-top { color: #bfe3f2; text-decoration: none; font-weight: 700; font-size: 0.88rem; white-space: nowrap; } .brand a:hover, .shop-top:hover { text-decoration: underline; } .shop-top { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .shop-link { cursor: pointer; } .clocks { display: flex; gap: 8px; flex-shrink: 0; } .clock-chip { background: rgba(255, 255, 255, 0.12); padding: 5px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } #shopToast { position: fixed; left: 50%; bottom: 78px; z-index: 44; transform: translateX(-50%) translateY(20px); background: var(--card); padding: 9px 16px; border-radius: 12px; box-shadow: var(--shadow); max-width: 88vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } #shopToast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } #shopToast a { color: var(--coral-dark); font-weight: 700; text-decoration: none; } #shopToast a:hover { text-decoration: underline; } .status-chip { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 19; background: var(--card); padding: 7px 16px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 700; font-size: 0.95rem; white-space: nowrap; } /* ---------- Toolbar ---------- */ #toolbar { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 6px; padding: 8px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); } #toolbar button { border: none; background: transparent; color: var(--ink); font-family: inherit; font-size: 0.72rem; font-weight: 700; padding: 6px 10px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; white-space: nowrap; } #toolbar button i { font-size: 1.2rem; } .icon-badge { position: relative; display: inline-block; } .icon-badge .badge { position: absolute; top: -6px; right: -12px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--coral-dark); color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 15px; text-align: center; } #toolbar button:disabled .badge { background: #b0b6bd; } #toolbar button:hover { background: rgba(111, 147, 168, 0.14); } #toolbar button:active { transform: scale(0.94); } #toolbar button:disabled { opacity: 0.4; cursor: default; } /* ---------- Herní plocha ---------- */ #stage { position: fixed; inset: 0; padding-top: 92px; padding-bottom: 68px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .own-col { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .board-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; } .board-label { font-weight: 700; font-size: 0.9rem; color: var(--frame-dark); } /* Na širších obrazovkách dává smysl mít oba regály vedle sebe */ @media (min-width: 900px) { #stage { flex-direction: row; align-items: flex-start; justify-content: center; gap: 32px; } .own-col { width: auto; } .board-wrap { width: auto; } .board, #placement-panel, .placement-actions-box { width: min(34vw, 380px); } } .board { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); width: min(92vw, 420px); aspect-ratio: 1; gap: 2px; padding: 8px; border-radius: 14px; background: linear-gradient(160deg, var(--frame), var(--frame-dark)); box-shadow: var(--shadow); } /* Vitrína (deska soupeře) — matné sklo, které se po zásahu "rozjasní" */ .board.enemy .cell { background: linear-gradient(160deg, var(--glass-light), var(--glass)); border-radius: 4px; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 0.12s ease; } .board.enemy .cell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0.22) 60%, rgba(255,255,255,0.02) 100%); pointer-events: none; } .board.enemy .cell:active { transform: scale(0.94); } .board.enemy .cell.disabled { cursor: default; } .board.enemy .cell.miss { background: linear-gradient(160deg, #c7d6dc, #9db1ba); } .board.enemy .cell.miss::after { content: "💧"; font-size: 0.9rem; opacity: 0.7; } .board.enemy .cell.hit { background: linear-gradient(160deg, #f3a6a6, #e0736c); animation: shatter 0.35s ease; } .board.enemy .cell.hit::after { content: "💥"; font-size: 1rem; } .board.enemy .cell.sunk { background: var(--card); } .board.enemy .cell.sunk svg { width: 78%; height: 78%; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } .board.enemy .cell.hint-peek { outline: 3px solid var(--amber); outline-offset: -3px; z-index: 2; } @keyframes shatter { 0% { transform: scale(1); filter: brightness(1.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); filter: brightness(1); } } /* Vlastní deska hráče — kousky sortimentu vidět celou hru */ .board.own .cell { background: rgba(255, 255, 255, 0.14); border-radius: 4px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; } .board.own .cell.ship svg { width: 74%; height: 74%; } .board.own .cell.hit { background: rgba(232, 115, 92, 0.55); } .board.own .cell.hit::after { content: "💥"; position: absolute; font-size: 0.9rem; } .board.own .cell.miss::after { content: "💧"; position: absolute; font-size: 0.8rem; opacity: 0.75; } .board.own .cell.sunk { background: rgba(120, 60, 50, 0.55); } .board.own .cell.preview { outline: 2px dashed var(--amber); outline-offset: -2px; } .board.own .cell.preview.bad { outline-color: var(--coral); } .board.own .cell.last-shot { z-index: 2; } .board.own .cell.last-shot::before { content: ""; position: absolute; inset: 2px; border: 3px solid var(--amber); border-radius: 3px; box-shadow: 0 0 0 2px rgba(224, 168, 56, 0.35); animation: last-shot-pulse 1.1s ease-in-out infinite; pointer-events: none; } @keyframes last-shot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.92); } } /* ---------- Panel umisťování lodí ---------- */ #placement-panel { width: min(92vw, 420px); background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; } #placement-panel h3 { margin: 0 0 8px; font-size: 1rem; } .ship-list { display: flex; flex-direction: column; gap: 6px; } .ship-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; background: rgba(111, 147, 168, 0.1); font-size: 0.86rem; font-weight: 600; } .ship-row.active { background: rgba(224, 168, 56, 0.22); outline: 2px solid var(--amber); } .ship-row.placed { opacity: 0.45; text-decoration: line-through; } .ship-row .ship-icon { width: 26px; height: 26px; flex-shrink: 0; } .ship-row .ship-icon svg { width: 100%; height: 100%; } .ship-row .len-dots { display: flex; gap: 2px; margin-left: auto; } .ship-row .len-dots span { width: 8px; height: 8px; border-radius: 2px; background: var(--frame); } .placement-actions-box { width: min(92vw, 420px); background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 10px 14px 12px; } .placement-actions-label { margin: 0 0 8px; font-size: 0.78rem; font-weight: 600; opacity: 0.75; line-height: 1.4; } .placement-actions { display: flex; gap: 8px; width: 100%; } .placement-actions button { flex: 1; min-width: 100px; padding: 10px 8px; border-radius: 10px; border: none; font-weight: 700; font-size: 0.85rem; cursor: pointer; background: var(--frame); color: #fff; } .placement-actions button:hover { background: var(--frame-dark); } .placement-actions button:active { transform: scale(0.97); } #btnStartBattle:disabled { background: #c7cdd1; color: #80868b; cursor: not-allowed; transform: none; } /* ---------- Nastavení (sheet) ---------- */ #sheet { position: fixed; z-index: 40; left: 50%; bottom: 0; width: min(94vw, 440px); transform: translate(-50%, 110%); background: var(--card); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(20,34,44,0.35); padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; transition: transform 0.24s ease; } #sheet.open { transform: translate(-50%, 0); } #sheet h2 { margin: 0 0 6px; font-size: 1.15rem; display: flex; justify-content: space-between; align-items: center; } #sheet h2 button { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--ink); } .sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 1rem; } .sheet-row:last-child { border-bottom: none; } .sheet-row.sheet-col { flex-direction: column; align-items: flex-start; gap: 9px; } .sheet-row.sheet-col select { width: 100%; } .diff-desc { margin: -3px 0 0; font-size: 0.8rem; opacity: 0.75; line-height: 1.4; } .sheet-row label { font-weight: 600; } .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(20, 30, 38, 0.18); cursor: pointer; padding: 0; } .swatch.sel { border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff; transform: scale(1.12); } .sheet-row select { padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); font-size: 0.9rem; } .sheet-row input[type="checkbox"] { accent-color: var(--teal); width: 20px; height: 20px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; } .stats-grid .stat { background: rgba(111,147,168,0.12); border-radius: 10px; padding: 8px; text-align: center; } .stats-grid .stat b { display: block; font-size: 1.2rem; } .stats-grid .stat span { font-size: 0.7rem; opacity: 0.75; } .sheet-help { font-size: 0.9rem; color: var(--ink); opacity: 0.85; line-height: 1.5; margin-top: 8px; } .sheet-help p { margin: 5px 0; display: flex; align-items: flex-start; gap: 8px; } .sheet-help i { color: var(--glass-dark); width: 18px; text-align: center; margin-top: 2px; } .end-promo, .sheet-promo { display: block; margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(120deg, rgba(224,168,56,0.18), rgba(63,167,161,0.16)); text-align: center; text-decoration: none; font-weight: 700; color: var(--frame-dark); } .end-promo:hover, .sheet-promo:hover { text-decoration: underline; } #rulesModal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 30, 38, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #rulesModal.visible { opacity: 1; pointer-events: auto; } .rules-box { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 24px; max-width: min(92vw, 430px); width: 100%; max-height: calc(100vh - 60px); overflow-y: auto; text-align: left; transform: translateY(12px); transition: transform 0.2s ease; } #rulesModal.visible .rules-box { transform: translateY(0); } .rules-box h2 { margin: 0 0 10px; font-size: 1.15rem; color: var(--frame-dark); display: flex; align-items: center; justify-content: space-between; } .rules-box h2 button { border: none; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--ink); padding: 4px 8px; border-radius: 8px; } .rules-box h3 { font-size: 0.98rem; margin: 14px 0 4px; color: var(--frame-dark); } .rules-box p, .rules-box li { font-size: 0.9rem; line-height: 1.55; margin: 4px 0; color: var(--ink); } .rules-box ul { margin: 4px 0; padding-left: 20px; } .rules-box .rule-note { background: rgba(224,168,56,0.16); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 0.86rem; } .install-btn, .sheet-link-btn, .rules-btn { font-family: inherit; font-size: 0.85rem; font-weight: 700; padding: 9px 16px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--teal), #2f7d78); color: #fff; cursor: pointer; } .rules-btn:active, .sheet-link-btn:active, .install-btn:active { transform: scale(0.96); } /* ---------- Overlay konce hry ---------- */ #endModal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(20, 30, 38, 0.6); padding: 20px; } #endModal.visible { display: flex; } #endModal .end-box { background: var(--card); border-radius: 18px; padding: 24px 22px; max-width: min(90vw, 400px); width: 100%; text-align: center; box-shadow: var(--shadow); } #endModal h2 { margin: 0 0 6px; font-size: 1.4rem; } #endModal p { margin: 0 0 14px; opacity: 0.85; } #endModal .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; } #endModal .btns:last-of-type { margin-bottom: 0; } #endModal .btns button { flex: 1; min-width: 100px; padding: 11px; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; background: var(--teal); color: #fff; } /* ---------- Overlay s přehledem lodí (sortimentu) ---------- */ #shipLegend { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(20, 30, 38, 0.6); padding: 20px; } #shipLegend.open { display: flex; } #shipLegend .box { background: var(--card); border-radius: 18px; padding: 20px 20px 16px; max-width: 360px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow); } #shipLegend h2 { margin: 0 0 12px; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; } #shipLegend h2 button { border: none; background: none; font-size: 1.05rem; cursor: pointer; color: var(--ink); } #shipLegend .ship-row { cursor: default; } /* ---------- Hláška o mezikroku (přechod na střílení) ---------- */ #toast { position: fixed; top: 96px; left: 50%; transform: translateX(-50%) translateY(-10px); background: rgba(20,30,38,0.9); color: #fff; padding: 8px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; z-index: 45; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Viditelnost celého řádku řeší JS přepínáním display na #installRow */ @media (max-width: 560px) { .brand .vs { display: none; } #topbar { padding: 7px 10px; } } @media (pointer: coarse), (max-width: 560px) { #sheet { padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); } #sheet h2 { font-size: 1.3rem; } .sheet-row { font-size: 1.1rem; padding: 13px 0; } .sheet-row select { font-size: 1.05rem; padding: 9px 12px; } } @media (prefers-reduced-motion: reduce) { .board.enemy .cell.hit { animation: none; } .board.own .cell.last-shot::before { animation: none; } #sheet, .board.enemy .cell { transition: none; } }