:root{
  --bg:#0b1020; --panel:#141b2e; --panel2:#1b2540; --line:#2a3658;
  --fg:#e8edf7; --muted:#8a97b8; --accent:#3da9fc; --accent2:#ffb454;
  --hit:#ff5c6c; --sunk:#c0264a; --miss:#5a6a92; --ship:#54b0ff; --ok:#36d399;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}

/* ===== ФОН: люди-мореплаватели (слева) против морских орков (справа) ===== */
#battle-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#battle-bg .side{
  position:absolute;top:0;bottom:0;width:50%;
  background-repeat:no-repeat;background-position:center bottom;background-size:cover;
}
#battle-bg .side-humans{
  left:0;
  background:
    radial-gradient(120% 80% at 20% 110%, rgba(255,196,92,.55), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(255,138,76,.45), transparent 55%),
    linear-gradient(180deg,#0c1530 0%, #25325e 36%, #6b4d7a 60%, #d98a5a 82%, #ffce80 100%);
}
#battle-bg .side-orcs{
  right:0;
  background:
    radial-gradient(120% 80% at 80% 110%, rgba(86,255,140,.30), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(120,255,90,.18), transparent 55%),
    linear-gradient(180deg,#03100a 0%, #0a2417 34%, #13402a 58%, #1d5a2f 82%, #2f7d34 100%);
}
/* корабли */
#battle-bg .ship{position:absolute;bottom:4%;width:30%;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
#battle-bg .ship-human{left:10%;animation:bob 5s ease-in-out infinite}
#battle-bg .ship-orc{right:10%;animation:bob 5s ease-in-out infinite reverse}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
/* компас */
#battle-bg .compass{position:absolute;left:6%;top:10%;width:84px;height:84px;animation:spin 60s linear infinite;filter:drop-shadow(0 0 10px rgba(255,200,120,.6))}
@keyframes spin{to{transform:rotate(360deg)}}
/* дым из орочьей трубы */
#battle-bg .smoke{position:absolute;right:17%;bottom:38%;width:60px;height:60px;
  background:radial-gradient(circle, rgba(120,200,120,.5), transparent 70%);
  border-radius:50%;animation:smoke 3s ease-out infinite;filter:blur(2px)}
@keyframes smoke{0%{transform:translateY(0) scale(.6);opacity:.6}100%{transform:translateY(-70px) scale(1.5);opacity:0}}
/* подписи сторон */
#battle-bg .side-label{position:absolute;bottom:2%;font:700 15px/1.2 system-ui,sans-serif;
  letter-spacing:.5px;padding:6px 12px;border-radius:20px;backdrop-filter:blur(2px)}
#battle-bg .side-humans .side-label{left:6%;color:#fff3d6;background:rgba(255,196,92,.25);border:1px solid rgba(255,224,150,.5)}
#battle-bg .side-orcs .side-label{right:6%;color:#d9ffd9;background:rgba(86,255,140,.18);border:1px solid rgba(150,255,120,.5)}
#battle-bg .side-label b{display:block;font-size:11px;opacity:.8;font-weight:600}
/* море */
#battle-bg .sea{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg, rgba(10,40,70,.0), rgba(8,24,48,.55) 40%, rgba(4,12,28,.85));
  mix-blend-mode:multiply}
#battle-bg .side-orcs .sea{background:linear-gradient(180deg, rgba(10,50,20,0), rgba(8,30,15,.55) 40%, rgba(3,16,8,.85))}
/* волны */
#battle-bg .waves{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(255,255,255,.06) 15px, transparent 18px),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(255,255,255,.04) 23px, transparent 26px);
  background-size:100% 100%, 100% 100%;
  animation:waves 7s linear infinite;opacity:.7}
@keyframes waves{0%{background-position-y:0,0}100%{background-position-y:36px,52px}}
/* ЛИНИЯ ФРОНТА */
#battle-bg .front-line{
  position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,220,150,0), rgba(255,220,150,.7) 20%, rgba(150,255,120,.7) 80%, rgba(150,255,120,0));
  box-shadow:0 0 22px rgba(255,210,120,.5), 0 0 22px rgba(150,255,120,.5);
}
#battle-bg .front-line::before{
  content:"";position:absolute;left:-9px;top:0;bottom:0;width:22px;
  background:
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(255,220,150,.55) 30px, transparent 34px 60px),
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(150,255,120,.45) 34px, transparent 38px 66px);
  filter:blur(.4px);
}
/* дымка поверх */
#battle-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(3,6,16,.55) 100%);}

/* чтобы карточки/доски лежали над фоном */
#app{position:relative;z-index:1}
#app{height:100%;display:flex;align-items:center;justify-content:center}
.screen{display:none;width:100%;height:100%}
.screen.active{display:flex;align-items:center;justify-content:center}

/* ---- login ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:28px 26px;width:min(420px,92vw);box-shadow:0 18px 60px rgba(0,0,0,.45)}
.login-card h1{margin:0 0 4px;font-size:30px;letter-spacing:.5px}
.sub{color:var(--muted);margin:0 0 18px;font-size:13px}
label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px;text-transform:uppercase;letter-spacing:.6px}
input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--fg);font-size:15px;outline:none}
input:focus{border-color:var(--accent)}
button{cursor:pointer;border:none;border-radius:10px;padding:11px 14px;font-size:15px;
  font-weight:600;color:#06121f;background:var(--accent);transition:.15s;margin-top:10px}
button:hover{filter:brightness(1.08)}
button.primary{background:var(--accent)}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;margin-top:12px}
.row input{flex:1;margin-top:0}
.join-row{margin-top:8px}
.room-code{font-family:monospace;font-size:18px;letter-spacing:3px;color:var(--accent2);
  padding:6px 10px;border:1px dashed var(--line);border-radius:8px}
.err{color:var(--hit);min-height:18px;font-size:13px;margin:10px 0 0}
.spinner{width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin 1s linear infinite;margin:18px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- game layout ---- */
#screen-game{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:14px;gap:12px}
.topbar{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:10px 16px}
.who{display:flex;align-items:center;gap:10px;flex:1}
.tag{padding:5px 12px;border-radius:20px;font-weight:700;font-size:14px}
.tag.me{background:rgba(61,169,252,.18);color:var(--accent)}
.tag.opp{background:rgba(255,180,84,.16);color:var(--accent2)}
.vs{color:var(--muted);font-size:12px}
.turn{flex:1;text-align:center;font-weight:700;font-size:15px;min-height:20px}
.status{width:12px;height:12px;border-radius:50%;background:var(--miss)}
.topbar button{margin-top:0;padding:6px 10px;font-size:13px}

.boards{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:flex-start;flex:1}
.board-wrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.board-wrap h3{margin:0 0 10px;font-size:15px;font-weight:700}
.board-wrap h3 small{color:var(--muted);font-weight:500;font-size:12px}

.board{display:grid;grid-template-columns:24px repeat(10,32px);grid-template-rows:24px repeat(10,32px);
  gap:2px;background:var(--panel2);padding:6px;border-radius:10px;user-select:none}
.cell{background:var(--bg);border-radius:4px;position:relative;cursor:default;transition:background .1s}
.coord{background:transparent;color:var(--muted);font-size:11px;display:flex;
  align-items:center;justify-content:center;cursor:default;font-weight:600}
.cell.ship{background:var(--ship)}
.cell.ship-pick{background:#7cc4ff;box-shadow:0 0 0 2px #fff inset}
.cell.preview{background:rgba(86,176,255,.45)}
.cell.preview-bad{background:rgba(255,92,108,.45)}
.cell.miss{background:var(--miss)}
.cell.hit{background:var(--hit)}
.cell.sunk{background:var(--sunk)}
.cell.fired{outline:2px solid var(--accent);outline-offset:-2px}
.board.enemy .cell{cursor:crosshair}
.board.enemy .cell.aim:hover{background:rgba(255,180,84,.35)}
.board.mine .cell.ship{cursor:pointer}
.dot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.cell.miss .dot{color:var(--muted)}
.cell.miss-enemy{background:rgba(90,106,146,.30)}
.cell.miss-enemy .dot{color:var(--muted)}
.cell.zone{background:repeating-linear-gradient(45deg,rgba(86,176,255,.10),rgba(86,176,255,.10) 4px,transparent 4px,transparent 8px)}
.cell.zone::after{content:'';position:absolute;inset:2px;border:1px dashed rgba(140,160,200,.45);border-radius:3px}

.fleet{margin-top:12px;width:380px;max-width:90vw}
.fleet-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.fleet-list{display:flex;flex-wrap:wrap;gap:6px}
.ship-chip{display:flex;gap:3px;padding:5px 7px;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;align-items:center;font-size:12px}
.ship-chip.placed{border-color:var(--ok);opacity:.6}
.ship-chip .pip{width:10px;height:18px;background:var(--ship);border-radius:2px}
.hint{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.4}
.fleet-actions{display:flex;gap:8px;margin-top:10px}
.fleet-actions button{margin-top:0;flex:1}

.legend{display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--muted)}
.legend i.d{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:middle}
i.d.miss{background:var(--miss)} i.d.hit{background:var(--hit)} i.d.sunk{background:var(--sunk)}

.side{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;
  width:280px;max-width:92vw;display:flex;flex-direction:column}
.log-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.log{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto;font-size:13px;max-height:230px}
.log li{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);color:var(--muted)}
.chat{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.chat-log{height:90px;overflow-y:auto;font-size:13px;margin-bottom:6px}
.chat-log .m{margin:2px 0}
.chat-log .me{color:var(--accent)} .chat-log .opp{color:var(--accent2)}
#chat-form{display:flex;gap:6px}
#chat-form input{flex:1;margin-top:0}
#chat-form button{margin-top:0;padding:8px 12px}

.overlay{position:fixed;inset:0;background:rgba(4,8,18,.82);display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:18px;z-index:50;backdrop-filter:blur(3px)}
.overlay.hidden{display:none}
.overlay h2{font-size:42px;margin:0}
.overlay .big{font-size:20px;color:var(--muted)}
.overlay .win{color:var(--ok)} .overlay .lose{color:var(--hit)}

.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--line);padding:10px 18px;border-radius:30px;font-size:14px;z-index:60;
  opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}

/* ===== touch: без зума/задержки на тач-устройствах ===== */
button,input{touch-action:manipulation}
.cell{touch-action:manipulation}

/* ===== мобильные (телефон, портрет) ===== */
@media(max-width:700px){
  #screen-game{padding:8px;gap:8px}
  .topbar{padding:8px 10px;gap:8px}
  .topbar button{font-size:11px;padding:5px 7px}
  .tag{font-size:12px;padding:4px 9px}
  .turn{font-size:13px}
  .who{gap:6px}
  .boards{flex-direction:column;align-items:stretch;gap:10px}
  .board-wrap{width:100%;padding:8px}
  .board-wrap h3{font-size:13px;margin-bottom:6px}
  /* доска растягивается на всю ширину экрана, клетки квадратные */
  .board{grid-template-columns:18px repeat(10,1fr);grid-template-rows:18px repeat(10,1fr);
    gap:1px;padding:4px;width:100%;aspect-ratio:1}
  .coord{font-size:9px}
  .dot{font-size:13px}
  .fleet{width:100%;max-width:100%;margin-top:8px}
  .hint{font-size:10px}
  .side{width:100%;max-width:100%;padding:10px}
  .log{max-height:140px}
  .chat-log{height:70px}
  .overlay h2{font-size:30px}
  .card{padding:20px 16px}
  .login-card h1{font-size:24px}
  .fleet-actions button{font-size:13px;padding:10px 6px}
}

@media(max-width:900px){
  .boards{flex-direction:column;align-items:center}
  .side{width:92vw}
}

/* ===== переключатель скинов ===== */
#btn-skin{
  position:fixed;top:14px;right:14px;z-index:70;margin:0;
  padding:7px 12px;font-size:13px;border-radius:20px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  box-shadow:0 6px 18px rgba(0,0,0,.35);transition:.15s;
}
#btn-skin:hover{color:var(--fg);border-color:var(--accent)}

/* ===== СКИН: MINECRAFT (стандарт = :root выше, без data-skin) ===== */
body[data-skin="minecraft"]{
  --bg:#141414; --panel:#1e1e1c; --panel2:#2a2a26; --line:#45453a;
  --fg:#e8e8da; --muted:#8f8f7a; --accent:#7CBD4B; --accent2:#F2C33D;
  --hit:#E33131; --sunk:#8B1E1E; --miss:#4e5a6a; --ship:#C99E5A; --ok:#41D985;
}
/* фон боя: слои земли с резкими стопами + пиксельные паттерны (песок / трава) */
body[data-skin="minecraft"] #battle-bg .side-humans{
  background:
    linear-gradient(180deg,
      #0d0b07 0%, #0d0b07 30%,
      #241c0e 30%, #241c0e 52%,
      #4a3614 52%, #4a3614 72%,
      #7a5c24 72%, #7a5c24 86%,
      #b89038 86%, #b89038 100%);
}
body[data-skin="minecraft"] #battle-bg .side-orcs{
  background:
    linear-gradient(180deg,
      #050d05 0%, #050d05 32%,
      #0c2412 32%, #0c2412 55%,
      #1c4a24 55%, #1c4a24 76%,
      #2f7d34 76%, #2f7d34 100%);
}
/* ближний план — сплошное синее море (песок убран) */
body[data-skin="minecraft"] #battle-bg .sea{
  height:48%;bottom:0;
  background:linear-gradient(180deg, rgba(23,135,212,0) 0%, rgba(23,135,212,.6) 30%, rgba(10,60,140,.95) 100%);
}
body[data-skin="minecraft"] #battle-bg .side-orcs .sea{
  background:linear-gradient(180deg, rgba(23,135,212,0) 0%, rgba(23,135,212,.6) 30%, rgba(10,60,140,.95) 100%);
}
/* волны — голубая пена, на всю воду */
body[data-skin="minecraft"] #battle-bg .waves{
  height:48%;
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(150,210,255,.20) 15px, transparent 18px),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(150,210,255,.13) 23px, transparent 26px);
}
/* земляной слой — повторяющиеся блоки (песчаник / травяной блок) */
body[data-skin="minecraft"] #battle-bg .side::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:48%;
  background-repeat:repeat;background-size:16px 16px;
  image-rendering:pixelated;z-index:1;pointer-events:none;
}
body[data-skin="minecraft"] #battle-bg .side-humans::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23d4a94a'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23c2983a'/%3E%3Crect x='7' y='3' width='2' height='1' fill='%23c2983a'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%23c2983a'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23c2983a'/%3E%3Crect x='10' y='11' width='2' height='1' fill='%23c2983a'/%3E%3Crect x='5' y='14' width='1' height='1' fill='%23c2983a'/%3E%3C/svg%3E");
}
body[data-skin="minecraft"] #battle-bg .side-orcs::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='4' fill='%234a9e3a'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%234a9e3a'/%3E%3Crect x='4' y='4' width='2' height='1' fill='%234a9e3a'/%3E%3Crect x='8' y='4' width='2' height='1' fill='%234a9e3a'/%3E%3Crect x='12' y='4' width='2' height='1' fill='%234a9e3a'/%3E%3Crect y='5' width='16' height='11' fill='%236b4f2e'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%235a3d1f'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%235a3d1f'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%237a5a34'/%3E%3Crect x='13' y='13' width='1' height='1' fill='%235a3d1f'/%3E%3C/svg%3E");
}
/* земляной паттерн больше не нужен — внизу сплошное море */
body[data-skin="minecraft"] #battle-bg .side::after{display:none}
body[data-skin="minecraft"] #battle-bg .side .compass,
body[data-skin="minecraft"] #battle-bg .side .ship,
body[data-skin="minecraft"] #battle-bg .side .smoke,
body[data-skin="minecraft"] #battle-bg .side .side-label{z-index:2}
/* майнкрафт-кнопки: блок с тенью-ступенькой */
body[data-skin="minecraft"] button{
  border-radius:3px;
  border:2px solid rgba(0,0,0,.55);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14), 0 4px 0 rgba(0,0,0,.5);
}
body[data-skin="minecraft"] button:hover{filter:brightness(1.12)}
body[data-skin="minecraft"] button:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.14), 0 1px 0 rgba(0,0,0,.5)}
/* панели и доски — рубленые блоки */
body[data-skin="minecraft"] .card,
body[data-skin="minecraft"] .board-wrap,
body[data-skin="minecraft"] .topbar,
body[data-skin="minecraft"] .side{border-radius:4px}
body[data-skin="minecraft"] .board{border-radius:4px}
body[data-skin="minecraft"] .cell{border-radius:2px}
body[data-skin="minecraft"] input{border-radius:3px}
body[data-skin="minecraft"] #btn-skin{border-radius:6px}
/* корабли на своей доске — текстура дубовых досок */
body[data-skin="minecraft"] .cell.ship{background:linear-gradient(135deg,#C99E5A 0%,#a37c3e 100%)}
body[data-skin="minecraft"] .cell.ship-pick{background:#e0c07a}
/* пиксельные корабли вместо классических */
.ship-mc{display:none}
body[data-skin="minecraft"] .ship-mc{display:block}
body[data-skin="minecraft"] .ship-classic{display:none}
body[data-skin="minecraft"] #battle-bg .ship{width:32%}
/* пальмы на пляже (пиксель-арт, майнкрафт: oak-ствол + джунглевая листва) */
.palm{display:none}
body[data-skin="minecraft"] .palm{
  display:block;position:absolute;bottom:6%;width:12%;height:auto;
  image-rendering:pixelated;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4));
  pointer-events:none;
}
body[data-skin="minecraft"] .palm-left{left:19%}
body[data-skin="minecraft"] .palm-right{right:19%}
body[data-skin="minecraft"] .palm-right svg{transform:scaleX(-1)}
/* плавные анимации (как в standard-скине, без ступенек) */
body[data-skin="minecraft"] #battle-bg .ship{animation:bob-mc 5s ease-in-out infinite}
body[data-skin="minecraft"] #battle-bg .ship-orc{animation-direction:reverse}
@keyframes bob-mc{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
body[data-skin="minecraft"] #battle-bg .compass{animation:spin-mc 60s linear infinite}
@keyframes spin-mc{to{transform:rotate(360deg)}}
body[data-skin="minecraft"] #battle-bg .smoke{animation:smoke-mc 3s ease-out infinite}
@keyframes smoke-mc{0%{transform:translateY(0) scale(.5);opacity:.8}100%{transform:translateY(-70px) scale(1.6);opacity:0}}
body[data-skin="minecraft"] #battle-bg .waves{animation:waves-mc 7s linear infinite}
@keyframes waves-mc{0%{background-position-y:0,0}100%{background-position-y:36px,52px}}