/* Where in the world, laid out the way GeoGuessr lays it out: the picture takes the screen and the
   map is a small square in the corner that opens when you reach for it. */
.pl-stage{
  position:relative;
  height:min(72vh,640px);
  border-radius:var(--r);overflow:hidden;
  background:#111;
  box-shadow:var(--e1);
}
.pl-photo-box{
  position:absolute;inset:0;overflow:hidden;
  cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;
}
.pl-photo-box:active{cursor:grabbing}
.pl-photo{
  width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:center center;
  will-change:transform;
}
.pl-photo-box::after{
  content:attr(data-round);
  position:absolute;top:12px;left:12px;
  padding:4px 12px;border-radius:999px;
  background:rgba(20,20,22,.7);color:#fff;font-size:12px;
  pointer-events:none;
}

/* the corner map: small until you want it */
.pl-mini{
  position:absolute;right:12px;bottom:12px;z-index:20;
  width:min(46vw,240px);height:min(30vh,168px);
  border-radius:10px;overflow:hidden;
  background:var(--surface);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:flex;flex-direction:column;
  opacity:.92;
  transition:width 200ms var(--ease),height 200ms var(--ease),opacity 200ms var(--ease);
}
.pl-mini.open{
  width:min(86vw,620px);height:min(72%,460px);
  opacity:1;
}
.pl-mini.revealed{width:min(92vw,760px);height:min(82%,540px)}
.pl-map-canvas{flex:1 1 auto;min-height:0}
.pl-mini-close{
  position:absolute;top:6px;right:6px;z-index:30;
  width:30px;height:30px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  border:0;cursor:pointer;font:inherit;font-size:15px;line-height:1;
  background:rgba(32,33,36,.72);color:#fff;
}
.pl-mini.open .pl-mini-close{display:flex}
.pl-mini.revealed .pl-mini-close{display:none}
.pl-mini-foot{
  flex:0 0 auto;padding:6px;
  background:var(--surface);border-top:1px solid var(--line-2);
}
.pl-guess{width:100%;min-height:38px;font-size:14px}
.pl-guess:disabled{opacity:.55}

.pl-bar{min-height:44px;margin-top:10px;display:flex;justify-content:center}
.pl-bar .pill{height:auto;min-height:38px;padding:8px 16px;font-size:14px}
.pl-after{margin-top:10px}
.pl-title{font-size:19px;color:var(--text);margin:2px 0 6px}
.pl-what{font-size:13px;color:var(--text-2);margin:0;line-height:1.5}

/* the truth, and the line from your guess to it */
.pl-truth{fill:var(--green);fill-opacity:.9;stroke:#fff}
.pl-line{stroke:var(--blue)}
.leaflet-container .country.flat{cursor:crosshair}

@media (max-width:520px){
  .pl-stage{height:min(68vh,560px)}
  /* smaller when it is out of the way, and it never takes the whole picture when it is open */
  .pl-mini{width:36vw;height:20vh;right:8px;bottom:8px}
  .pl-mini.open{width:calc(100% - 16px);height:58%}
  .pl-mini.revealed{width:calc(100% - 16px);height:66%}
}