<!DOCTYPE html>
<!-- vim:set nowrap: -->
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover">
<meta name="theme-color" content="#444">
<meta charset="utf-8">
<title>NEVSKY</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/common/client.css">
<link rel="stylesheet" href="play.css">
<script defer src="/common/client.js"></script>
<script defer src="data.js"></script>
<script defer src="play.js"></script>
</head>
<body>

<header>
	<div id="toolbar">
		<details>
			<summary><img src="/images/cog.svg"></summary>
			<menu>
				<li><a target="_blank" href="/nevsky/info/rules.html">Rules of Play</a>
				<li><a target="_blank" href="/nevsky/info/playbook.html">Background Book</a>
				<li><a target="_blank" href="/nevsky/info/pac.html">Reference Sheets</a>
				<li><a target="_blank" href="/nevsky/info/cards.html">Arts of War</a>
				<li><a target="_blank" href="/nevsky/info/lords.html">Lord Mats</a>
			</menu>
		</details>
		<button onclick="toggle_pieces()"><img src="/images/earth-africa-europe.svg"></button>
	</div>
</header>

<aside>
	<div id="roles">
		<div class="role" id="role_Teutons">
			<div class="role_name">Teutons</div>
			<div class="role_stat">0 Held</div>
			<div class="role_user">-</div>
		</div>
		<div class="role" id="role_Russians">
			<div class="role_name">Russians</div>
			<div class="role_stat">0 Held</div>
			<div class="role_user">-</div>
		</div>
		<div id="turn_info"><div id="command" class="card teutonic aow_back"></div></div>
	</div>
	<div id="log"></div>
</aside>

<main data-min-zoom="1">

<!-- MAP, TUCKED, EVENTS -->
<section id="sec_map">

<div id="map">

<div id="veche"></div>
<div class="box veche_label" id="veche_label_top"></div>
<div class="box veche_label" id="veche_label_bottom"></div>
<div class="veche_border" id="veche_border_w"></div>
<div class="veche_border" id="veche_border_e"></div>
<div class="veche_border" id="veche_border_sw"></div>
<div class="veche_border" id="veche_border_se"></div>

<div id="locales"></div>
<div id="boxes"></div>

<div id="pieces">
	<div id="elr1" class="marker circle enemy_lords_removed teutonic hide"></div>
	<div id="elr2" class="marker circle enemy_lords_removed russian hide"></div>
	<div id="turn" class="hide marker circle turn levy t1"></div>
	<div id="vp2" class="hide marker circle victory russian v0 stack"></div>
	<div id="vp1" class="hide marker circle victory teutonic v0 stack"></div>
	<div id="legate" class="hide"></div>
	<div id="smerdi" class="box"></div>
	<div id="castle11" class="hide marker rectangle castle teutonic"></div>
	<div id="castle12" class="hide marker rectangle castle teutonic"></div>
	<div id="castle21" class="hide marker rectangle castle russian"></div>
	<div id="castle22" class="hide marker rectangle castle russian"></div>
</div>

</div>

<div class="tuck_under_map">
<div id="capabilities1"></div>
<div id="capabilities2"></div>
</div>

<div id="events_panel" class="panel hide">
<div id="events_header" class="panel_header">Events</div>
<div id="events" class="panel_body"></div>
</div>
</div>

</section>

<!-- BATTLE / ARTS OF WAR -->
<section id="sec_battle">

<div id="arts_of_war_panel" class="panel hide">
<div id="arts_of_war_header" class="panel_header">Arts of War</div>
<div id="arts_of_war" class="panel_body"></div>
</div>

<div id="battle_panel" class="panel hide">
<div id="battle_header" class="panel_header">Battle</div>
<div id="battle_grid">
	<div id="grid_ga">
		<div id="pursuit" class="marker rectangle pursuit russian hide"></div>
		<div id="battle_walls1" class="siegeworks"></div>
		<div id="battle_walls2" class="siegeworks"></div>
		<div id="garrison"></div>
		<div id="battle_walls3" class="siegeworks"></div>
		<div id="battle_walls4" class="siegeworks"></div>
	</div>
	<div class="grid_array att" id="grid_a1"></div>
	<div class="grid_array att" id="grid_a2"></div>
	<div class="grid_array att" id="grid_a3"></div>
	<div class="grid_array def" id="grid_d1"></div>
	<div class="grid_array def" id="grid_d2"></div>
	<div class="grid_array def" id="grid_d3"></div>
	<div class="grid_array att" id="grid_rg1"></div>
	<div class="grid_array att" id="grid_rg2"></div>
	<div class="grid_array att" id="grid_rg3"></div>
	<div class="siegeworks" id="grid_sw"></div>
	<div class="grid_array def" id="grid_sa1"></div>
	<div class="grid_array def" id="grid_sa2"></div>
	<div class="grid_array def" id="grid_sa3"></div>
</div>
</div>

<div id="reserves_panel" class="panel hide">
<div id="reserves_header" class="panel_header">Reserves</div>
<div id="reserves" class="panel_body"></div>
</div>

</section>

<!-- LORD MATS, HAND, PLAN -->
<section id="sec_lords">

<div class="panel court_panel">
<div id="court1_header" class="panel_header">Lords</div>
<div id="court1" class="panel_body court_body"></div>
</div>

<div id="hand_panel" class="panel hide">
<div id="hand_header" class="panel_header">Hand</div>
<div id="hand" class="panel_body"></div>
</div>
</div>

<div id="plan_panel" class="panel hide">
<div id="plan_header" class="panel_header">Plan</div>
<div id="plan" class="panel_body"></div>
<div id="plan_actions" class="panel_body"></div>
</div>

<div class="panel court_panel">
<div id="court2_header" class="panel_header">Lords</div>
<div id="court2" class="panel_body court_body"></div>
</div>

</section>

</main>

<footer id="status"></footer>

</body>