*{box-sizing:border-box}
body{
  margin:0;
  background:#c0c0c0;
  color:#000;
  font-family:"Times New Roman",Times,serif;
}
a{color:#0000ee}
.wrapper{max-width:1180px;margin:0 auto;padding:8px}
.retro-shell{border:3px ridge #eee;background:#c0c0c0;padding:8px}
.header{text-align:center}
.header h1{margin:.1rem 0;font-size:2rem}
.blink{animation:blink 1s steps(1) infinite;color:#d00000;font-weight:bold}
@keyframes blink{50%{opacity:0}}
.retro-btn{
  appearance:none;border:2px outset #eee;background:#c0c0c0;color:#000;
  padding:6px 10px;font:bold 13px Arial,sans-serif;cursor:pointer;text-decoration:none;display:inline-block
}
.retro-btn:active{border-style:inset}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:8px 0}
.panel{background:#fff;border:3px ridge #eee;padding:8px}
.titlebar{background:#000080;color:#fff;text-align:center;padding:4px;font-weight:bold}
.warning{background:#ffffcc;border:2px solid #000;padding:8px;text-align:center;font-family:Arial,sans-serif}
.ticker{white-space:nowrap;overflow:hidden;background:#fff;border:2px inset #eee;padding:4px;margin:8px 0}
.ticker span{display:inline-block;animation:ticker 19s linear infinite}
@keyframes ticker{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.map{
  position:relative;overflow:hidden;border:3px inset #eee;
  background:#9cc7e8;min-height:430px
}
.world-svg{display:block;width:100%;height:430px}
.land{fill:#d7d39a;stroke:#333;stroke-width:.8}
.xmark{
  position:absolute;transform:translate(-50%,-50%);font:bold 18px Arial,sans-serif;
  color:#d40000;text-shadow:1px 1px #fff;cursor:pointer;background:transparent;border:0;padding:2px
}
.xmark:hover,.xmark:focus{transform:translate(-50%,-50%) scale(1.7)}
.popup{
  position:absolute;z-index:8;max-width:260px;background:#ffffe1;border:3px outset #eee;
  padding:8px;font:13px Arial,sans-serif
}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.counter{background:#000;color:#00ff33;font-family:"Courier New",monospace;padding:2px 6px;border:2px inset #eee;letter-spacing:2px}
.footer{text-align:center;font-size:.9rem;margin-top:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{font-weight:bold}
input,select,textarea{width:100%;padding:7px;border:2px inset #eee;background:#fff;font:16px Arial,sans-serif}
textarea{min-height:90px}
.thumb{width:110px;height:85px;object-fit:cover;border:2px inset #eee;background:#eee}
.admin-table{width:100%;border-collapse:collapse;background:#fff;font-family:Arial,sans-serif;font-size:13px}
.admin-table th,.admin-table td{border:1px solid #777;padding:5px;vertical-align:top}
.message{padding:8px;border:2px solid #000;background:#e9ffe9;margin:8px 0}
.error{background:#ffeaea}
.photo-page img{max-width:100%;height:auto;border:4px ridge #eee}
@media(max-width:700px){
  .wrapper{padding:4px}
  .header h1{font-size:1.65rem}
  .nav{display:grid;grid-template-columns:1fr 1fr}
  .retro-btn{width:100%;text-align:center}
  .grid3,.form-grid{grid-template-columns:1fr}
  .map,.world-svg{height:315px;min-height:315px}
  .xmark{font-size:21px}
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table thead{display:none}
  .admin-table tr{border:3px ridge #eee;margin-bottom:8px}
  .admin-table td{border:0;border-bottom:1px dotted #aaa}
}