/* Page shell and the account screens. In a file rather than inline so the public
   build's Content-Security-Policy can refuse all inline code (PRD-ACCOUNTS §6.3). */

@font-face{ font-family:"Pixelify Sans"; src:url("../assets/fonts/PixelifySans.woff2") format("woff2");
  font-weight:400 700; font-display:block; }
@font-face{ font-family:"Fredoka"; src:url("../assets/fonts/Fredoka.woff2") format("woff2");
  font-weight:300 700; font-display:block; }
html,body{margin:0;padding:0;background:#15111a;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
/* 100vh lies on mobile Safari — dvh is the one that tracks the real viewport. */
html,body{height:100dvh;width:100vw;overflow:hidden;}
#game{width:100vw;height:100dvh;}
#game canvas{display:block;image-rendering:pixelated;}
#rotate{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:#0D0C17;color:#8F8A88;font:14px/1.6 ui-monospace,Menlo,monospace;
  text-align:center;z-index:9999;padding:24px;}
@media (orientation:landscape) and (max-height:520px){
  #rotate{display:flex;} #game{display:none;}
}

/* ------------------------------------------------------------------ account */
.acct{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(13,12,23,.88);padding:16px;box-sizing:border-box;
  padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));
  font-family:"Pixelify Sans",ui-monospace,monospace;color:#B9B4AB;
  -webkit-user-select:text;user-select:text;animation:acct-in .18s ease-out;}
@keyframes acct-in{from{opacity:0}to{opacity:1}}
.acct-panel{width:100%;max-width:360px;max-height:100%;overflow:auto;box-sizing:border-box;
  background:#1F1922;border:3px solid #3A3140;box-shadow:0 0 0 3px #0D0C17,0 12px 40px rgba(0,0,0,.6);
  padding:20px 18px 16px;}
.acct h2{margin:0 0 6px;font-size:22px;font-weight:700;color:#E8DFD0;letter-spacing:.5px;}
.acct p{margin:0 0 14px;font-size:15px;line-height:1.4;color:#8F8A88;}
.acct label{display:block;font-size:14px;color:#8F8A88;margin:10px 0 4px;}
.acct input[type=email],.acct input[type=password],.acct input[type=text]{
  width:100%;box-sizing:border-box;font:16px "Pixelify Sans",ui-monospace,monospace; /* 16px: iOS won't zoom */
  color:#E8DFD0;background:#15111A;border:2px solid #3A3140;border-radius:0;padding:10px 10px;outline:none;}
.acct input:focus{border-color:#25B3ED;}
.acct .pw{position:relative;}
.acct .pw input{padding-right:62px;}
.acct .pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#25B3ED;font:14px "Pixelify Sans",monospace;padding:8px;cursor:pointer;}
.acct .check{display:flex;gap:10px;align-items:center;margin:14px 0 4px;font-size:15px;color:#B9B4AB;}
.acct .check input{width:20px;height:20px;accent-color:#25B3ED;margin:0;}
.acct .err{min-height:18px;margin:10px 0 0;font-size:14px;color:#E0645A;}
.acct .ok{margin:10px 0 0;font-size:14px;color:#7FC9A0;}
.acct .btn{display:block;width:100%;margin:14px 0 0;padding:12px;font:18px "Pixelify Sans",monospace;
  color:#0D0C17;background:#25B3ED;border:0;box-shadow:inset 0 -4px 0 #1478A3;cursor:pointer;}
.acct .btn:disabled{opacity:.55;cursor:default;}
.acct .btn.ghost{background:transparent;color:#B9B4AB;box-shadow:inset 0 0 0 2px #3A3140;}
.acct .btn.danger{background:#9B1C17;color:#F2E4C4;box-shadow:inset 0 -4px 0 #49140F;}
.acct .links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;}
.acct .link{background:none;border:0;padding:4px 0;color:#25B3ED;font:15px "Pixelify Sans",monospace;cursor:pointer;}
.acct .link.dim{color:#6C7981;}
.acct .who{font-size:15px;color:#E8DFD0;word-break:break-all;margin:0 0 4px;}
.acct .cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px;}
.acct .card{border:2px solid #3A3140;padding:10px;font-size:14px;line-height:1.45;color:#B9B4AB;}
.acct .card b{display:block;color:#E8DFD0;font-size:15px;margin-bottom:4px;}

.nudge{position:fixed;left:50%;transform:translateX(-50%);z-index:40;
  bottom:calc(env(safe-area-inset-bottom) + 108px);display:flex;align-items:center;gap:2px;
  background:#1F1922;border:2px solid #25B3ED;box-shadow:0 4px 18px rgba(0,0,0,.5);
  font:15px "Pixelify Sans",monospace;color:#E8DFD0;animation:acct-in .25s ease-out;white-space:nowrap;}
.nudge button{background:none;border:0;color:inherit;font:inherit;padding:9px 12px;cursor:pointer;}
.nudge .x{color:#6C7981;padding:9px 10px 9px 4px;}
.toast{position:fixed;left:50%;transform:translateX(-50%);z-index:60;max-width:calc(100vw - 32px);
  top:calc(env(safe-area-inset-top) + 132px);background:#1F1922;border:2px solid #3A3140;
  padding:9px 14px;font:15px "Pixelify Sans",monospace;color:#E8DFD0;text-align:center;
  animation:acct-in .25s ease-out;pointer-events:none;}