@font-face{font-family:DBArabic;src:url('/drawing-game/arabic-d7c65c17615b.woff') format('woff');font-display:swap;font-weight:100 900}
:root{color-scheme:dark;--bg:#0b0d12;--panel:#11151c;--line:#ffffff12;--text:#e4e8ee;--muted:#7e8999;--gold:#c8a477}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:DBArabic,'Segoe UI',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{color:inherit}img{display:block;max-width:100%}[hidden]{display:none!important}.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;right:20px;z-index:100;background:var(--gold);color:#15171b;padding:10px 18px;border-radius:6px}.skip-link:focus{top:12px}
.site-header{border-bottom:1px solid var(--line);background:#0d1016}.header-row{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;flex:none}.brand img{border-radius:50%;width:38px;height:38px;object-fit:contain}.brand b{font:750 28px/1 'Segoe UI',Arial,sans-serif;letter-spacing:-1.4px;color:#f1f3f6}.brand em{font-style:normal;color:#f03c50}.brand small{font-size:15px;letter-spacing:0;font-weight:400;color:#9aa8b9}.site-nav{display:flex;align-items:center;gap:27px;color:#9ba6b5;font-size:12px}.site-nav a:hover,.site-nav a[aria-current]{color:#dfc39e}
.page-tools{display:flex;align-items:center;gap:26px;padding:32px 0 23px}.page-tools h1{font-size:30px;line-height:1.3;margin:0;font-weight:650;flex:none}.search-field{display:flex;align-items:center;gap:10px;border:1px solid #ffffff16;background:#10151d;border-radius:9px;padding-inline:13px;max-width:390px;flex:1;margin-inline-start:9px}.search-field svg{width:18px;height:18px;flex:none;fill:none;stroke:#8995a6;stroke-width:1.5}.search-field input{border:0;outline:0;background:transparent;color:#e8edf4;width:100%;min-width:0;height:43px;font-size:12px}.search-field input::placeholder{color:#69778b}.back-link{font-size:11px;color:#a69279;margin-inline-start:auto;white-space:nowrap}.back-link span{margin-inline-start:7px}
.map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.map-card{display:grid;grid-template-columns:124px minmax(0,1fr) 13px;align-items:center;gap:15px;padding:9px;border:1px solid #ffffff10;border-radius:11px;background:linear-gradient(115deg,#11161e,#12161d);text-align:right;width:100%;min-height:100px;transition:border-color .15s,background .15s,transform .15s}.map-card:hover{border-color:#b18d5959;background:#171c24;transform:translateY(-1px)}.card-picture{overflow:hidden;width:124px;aspect-ratio:16/9;border-radius:7px;background:#070a0f}.card-image{width:100%;height:100%;object-fit:cover;object-position:center}.card-copy{min-width:0}.card-title{font:600 14px/1.5 'Segoe UI',Arial,sans-serif;text-align:right;margin:0;overflow-wrap:anywhere;color:#e5e9ef}.card-arabic{font-size:10px;line-height:1.65;color:#8e9aab;margin:5px 0 0;overflow-wrap:anywhere}.card-arrow{color:#786e61;font:19px/1 Arial,sans-serif}.card-fallback{width:100%;height:100%;display:grid;place-items:center;color:#545f70}.card-fallback svg{width:39px;height:39px;fill:none;stroke:currentColor;stroke-width:1.3}
.load-state{min-height:180px;display:grid;place-items:center}.loader{width:23px;height:23px;border:2px solid #ffffff19;border-top-color:#caa679;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;color:#8d98a9;padding:45px 18px;font-size:13px}.empty-state button,.image-message button{border:1px solid #c5a77b50;background:#b38c5512;border-radius:7px;color:#ddc3a0;padding:8px 17px;font-size:11px}
.site-footer{border-top:1px solid var(--line);margin-top:30px}.footer-row{display:flex;justify-content:space-between;align-items:center;min-height:85px}.footer-row .brand b{font-size:23px}.footer-row .brand small{font-size:12px}.footer-row>a:last-child{color:#94836d;font:24px 'Segoe UI',sans-serif}
@media(min-width:1550px){.map-card{grid-template-columns:136px minmax(0,1fr) 13px;min-height:104px}.card-picture{width:136px}}
@media(max-width:1050px){.map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.map-card{grid-template-columns:132px minmax(0,1fr) 13px}.card-picture{width:132px}.site-nav{gap:19px;font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.map-card{transition:none}.map-card:hover{transform:none}.loader{animation:none}}
body.dialog-open { overflow: hidden; }
.map-dialog {
  padding: 0;
  width: min(1360px, calc(100vw - 28px));
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  border: 1px solid #545b6566;
  border-radius: 14px;
  background: #10141b;
  color: var(--text);
}
.map-dialog::backdrop { background: #03050ad9; }
.dialog-shell { padding: 16px 18px 18px; }
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.detail-name { min-width: 0; }
.detail-name h2 {
  margin: 0;
  text-align: start;
  font: 700 clamp(16px, 3.2vw, 24px)/1.28 'Segoe UI', Arial, sans-serif;
  overflow-wrap: anywhere;
}
.detail-name p { margin: 3px 0 0; font-size: 12px; color: #a0aab8; }
.detail-actions { display: flex; align-items: center; gap: 7px; flex: none; }
.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff21;
  border-radius: 50%;
  background: #ffffff06;
  color: #dfe5ed;
  font: 24px/1 Arial, sans-serif;
}
.icon-button:hover { background: #ffffff13; }
.variant-field { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #b0bbc9; font-size: 12px; }
.variant-field select {
  min-height: 37px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #536277;
  border-radius: 7px;
  color: #eef2f7;
  background: #192233;
}
.map-pictures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.map-picture {
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  background: #0b1018;
}
.map-picture-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 7px;
  min-height: 32px;
  padding: 0 3px 6px;
  color: #f0d4b1;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
.map-picture-variant { color: #afb9c7; font-size: 11px; font-weight: 500; }
.detail-image {
  width: 100%;
  height: auto;
  max-height: min(75dvh, 980px);
  object-fit: contain;
  object-position: center top;
  border-radius: 5px;
}
.map-picture-credit { margin: 6px 0 0; color: #a1adbb; text-align: center; font-size: 11px; line-height: 1.5; }
.image-message { margin: 0; min-height: 110px; padding: 12px 5px; text-align: center; color: #a1adbb; font-size: 12px; }
.image-message button { display: block; margin: 8px auto 0; }

@media (max-width: 650px) {
  .wrap { width: calc(100% - 28px); }
  .header-row { min-height: 65px; gap: 15px; }
  .brand { gap: 6px; }
  .brand img { width: 31px; height: 31px; }
  .brand b { font-size: 24px; }
  .brand small { font-size: 12px; }
  .site-nav { gap: 15px; font-size: 10px; }
  .site-nav a:first-child, .site-nav a:last-child { display: none; }
  .page-tools { flex-wrap: wrap; gap: 9px 12px; padding: 22px 0 15px; }
  .page-tools h1 { font-size: 24px; }
  .search-field { margin-inline-start: 0; max-width: none; }
  .search-field input { height: 38px; }
  .back-link { display: none; }
  .map-grid { grid-template-columns: 1fr; gap: 8px; }
  .map-card { grid-template-columns: 114px minmax(0, 1fr) 10px; min-height: 79px; gap: 11px; padding: 7px; }
  .card-picture { width: 114px; }
  .map-dialog { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 14px); }
  .dialog-shell { padding: 9px 7px 11px; }
  .detail-header { gap: 6px; margin-bottom: 8px; }
  .detail-actions { gap: 5px; }
  .detail-name p { font-size: 10px; }
  .icon-button { width: 35px; height: 35px; }
  .map-pictures { gap: 5px; }
  .map-picture { padding: 3px; border-radius: 7px; }
  .map-picture-label { min-height: 27px; padding-bottom: 3px; font-size: 12px; }
  .map-picture-variant, .map-picture-credit { font-size: 9px; }
}