/* The PUBLIC in-game wiki (/wiki, templates/wiki_public.html + public.js). Everything inside .gv-win is game.css (the
   game look, shared with the editor); this file is only the page around the window: the search bar, the results,
   the frame that scales the 1130 px window to the screen, the loading / empty states. */

/* the extra CUI faces a website block may ask for (the editor declares them in ed/ed.css) */
@font-face { font-family: "SRMarker"; src: url("fonts/PermanentMarker-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SRPixel"; src: url("fonts/PressStart2P-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

.pw-app { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 1130px; margin: 0 auto; min-width: 0; }
.pw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pw-h { margin: 0; font-size: 26px; line-height: 1.1; letter-spacing: 0.02em; }
.pw-sub { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 14px; opacity: 0.7; }
.pw-edit { flex: none; padding: 5px 10px; border: 1px solid rgba(255, 176, 32, 0.55); border-radius: 4px;
  color: #FFB020; font-size: 13px; text-decoration: none; white-space: nowrap; }
.pw-edit:hover { background: rgba(255, 176, 32, 0.12); }
.pw-search { display: flex; gap: 6px; flex: 0 1 380px; min-width: 0; margin: 0; }
.pw-search input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 15px; border-radius: 4px;
  border: 1px solid #3a3333; background: #161414; color: #ece6df; }
.pw-search input:focus { outline: 2px solid #c9a22e; outline-offset: 1px; }
.pw-search button { flex: 0 0 auto; padding: 8px 14px; font-size: 14px; font-weight: 600; border-radius: 4px; cursor: pointer;
  border: 1px solid #3a3333; background: #1c1919; color: #ece6df; }
.pw-search button:hover { background: #2b2626; }
/* the store theme (body.storemode button) makes every button full width: not this one, or it pushes the page wider
   than a phone */
body.storemode .pw-search button, .pw-search button { width: auto; display: inline-block; }
.pw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pw-results { background: #161414; border: 1px solid #2b2626; border-radius: 4px; max-height: 420px; overflow-y: auto; }
.pw-results[hidden] { display: none; }
.pw-rlist { list-style: none; margin: 0; padding: 4px 0; }
.pw-r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 12px; color: #ece6df; text-decoration: none; }
.pw-r:hover, .pw-r:focus { background: #1c1919; outline: none; }
.pw-r:focus-visible { box-shadow: inset 0 0 0 2px #c9a22e; }
.pw-rt { font-weight: 600; color: #ece6df; overflow-wrap: anywhere; }
.pw-rtab { font-size: 12px; color: #c9a22e; text-transform: uppercase; letter-spacing: 0.04em; }
.pw-rs { flex: 1 0 100%; font-size: 13px; color: #8e857e; overflow-wrap: anywhere; }
.pw-rnone { padding: 10px 12px; color: #8e857e; }

.pw-status { padding: 8px 12px; border-left: 3px solid #c9a22e; background: rgba(201, 162, 46, 0.08); font-size: 14px; }
.pw-status[hidden] { display: none; }

/* the window: game.js draws it at 1130 px; public.js scales .gv-scaler to the stage width and sizes .pw-frame */
.pw-stage { position: relative; width: 100%; min-width: 0; overflow: hidden; }
/* phones: the window keeps a readable scale (public.js PW.stageScale) and pans sideways inside the stage */
.pw-stage.pw-pan { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pw-frame { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); background: #0e0d0d; }
.pw-frame.pw-building { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.pw-measure { position: absolute; left: 0; top: 0; width: 1130px; visibility: hidden; }
.pw-docwrap { position: relative; display: flex; flex-direction: column; }
.gv-message.pw-inline { position: relative; }
.pw-frame [role="link"]:focus { outline: none; }
.pw-frame [role="link"]:focus-visible { box-shadow: inset 0 0 0 2px #c9a22e; }
.pw-frame:focus { outline: none; }
/* the real link laid over a drawn link (middle click, Copy link address, long-press); it draws nothing itself */
.pw-frame a.pw-link { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; display: block; background: transparent;
  color: inherit; text-decoration: none; -webkit-touch-callout: default; }
.pw-frame a.pw-link:focus { outline: none; }
.pw-frame a.pw-link:focus-visible { box-shadow: inset 0 0 0 2px #c9a22e; }
.pw-empty { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center;
  min-height: 240px; padding: 24px 16px; border-radius: 4px; background: #0e0d0d; color: #8e857e; font-size: 15px; }
.pw-empty b { color: #ece6df; font-size: 17px; }

@media (max-width: 700px) {
  .pw-h { font-size: 22px; }
  .pw-search { flex: 1 1 100%; }
  .pw-frame { border-radius: 0; box-shadow: none; }
}