@font-face{
  font-family:"Tanseek";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://www.paranormalarabia.net/static/fonts/tanseek.woff2") format("woff2"),
      url("https://www.paranormalarabia.net/static/fonts/tanseek.woff") format("woff")
}

@font-face{
  font-family:"Roboto";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://www.paranormalarabia.net/static/fonts/roboto.woff2") format("woff2"),
      url("https://www.paranormalarabia.net/static/fonts/roboto.woff") format("woff")
}

:root{
  --tg-bg:#000;
  --tg-panel:#292929;
  --tg-panel-2:#1f1f1f;
  --tg-panel-3:#161616;
  --tg-text:#e3e3e3;
  --tg-muted:#aaa;
  --tg-gold:#ffcc66;
  --tg-gold-soft:#ffe6b3;
  --tg-link:#99ccff;
  --tg-red:#a0060e;
  --tg-red-dark:#850007;
  --tg-border:rgba(255,255,255,.09);
  --tg-gold-border:rgba(255,204,102,.24);
  --tg-shadow:0 20px 50px rgba(0,0,0,.45);
  --tg-radius:16px;
}


/* ==========================================================
   Paranormal Arabia site header/logo
   Same responsive artwork used by the website header.
   Navigation/search/category/theme controls are intentionally omitted.
   ========================================================== */
#paheader.tg-site-header{
  width:min(980px,100%);
  margin:0 auto 14px;
  box-sizing:border-box;
  direction:rtl;
  text-align:right;
  position:relative;
  background-color:#000;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  overflow:hidden
}

#paheader .tg-site-header-inner{
  width:100%;
  height:100%;
  position:relative;
  box-sizing:border-box
}

/* The logo is part of the original responsive header artwork.
   Make the artwork clickable without adding visible UI. */
#paheader .tg-site-header-link{
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  background:transparent;
  text-decoration:none
}

#paheader .tg-site-header-link:focus-visible{
  outline:2px solid #ffcc66;
  outline-offset:-3px
}

@media (min-width:320px) and (max-width:359px){
  #paheader.tg-site-header{
    height:44px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_320x44.webp")
  }
}

@media (min-width:360px) and (max-width:374px){
  #paheader.tg-site-header{
    height:50px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_360x50.webp")
  }
}

@media (min-width:375px) and (max-width:410px){
  #paheader.tg-site-header{
    height:52px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_375x52.webp")
  }
}

@media (min-width:411px) and (max-width:479px){
  #paheader.tg-site-header{
    height:57px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_411x57.webp")
  }
}

@media (min-width:480px) and (max-width:639px){
  #paheader.tg-site-header{
    height:66px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_480x66.webp")
  }
}

@media (min-width:640px) and (max-width:767px){
  #paheader.tg-site-header{
    height:88px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_640x88.webp")
  }
}

@media (min-width:768px) and (max-width:979px){
  #paheader.tg-site-header{
    height:132px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_768x132.webp")
  }
}

@media (min-width:980px){
  #paheader.tg-site-header{
    height:132px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_980x132.webp")
  }
}

/* Very narrow fallback */
@media (max-width:319px){
  #paheader.tg-site-header{
    height:44px;
    background-image:url("https://www.paranormalarabia.net/static/img/pa_header_320x44.webp")
  }
}

*{
  box-sizing:border-box
}

html{
  color-scheme:dark
}

body{
  margin:0;
  min-height:100vh;
  direction:rtl;
  color:var(--tg-text);
  background:
    radial-gradient(circle at 50% -10%,rgba(160,6,14,.20),transparent 38rem),
    rgba(0,0,0,.91)
    url("https://www.paranormalarabia.net/static/img/rust-tile-new.webp")
    repeat;
  font-family:Roboto,Tahoma,Verdana,sans-serif;
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}

a,
a:visited{
  color:var(--tg-link);
  text-decoration:none
}

a:hover,
a:focus{
  color:var(--tg-gold)
}

button,
input,
select{
  font:inherit
}

button{
  -webkit-tap-highlight-color:transparent
}

.tg-page{
  width:min(980px,calc(100% - 28px));
  margin:0 auto;
  padding:18px 0 48px
}

.tg-shell{
  background:rgba(41,41,41,.96);
  border:1px solid var(--tg-border);
  border-radius:20px;
  box-shadow:var(--tg-shadow);
  overflow:hidden;
  backdrop-filter:blur(4px)
}

.tg-titlebar{
  padding:20px 24px 18px;
  text-align:center;
  background:
    linear-gradient(45deg,#0c0c0c 28%,#6c050a 70%,#a0060e 100%);
  border-bottom:1px solid rgba(255,204,102,.18)
}

.tg-titlebar h1{
  margin:0;
  font-family:Tanseek,Tahoma,sans-serif;
  font-size:clamp(2rem,5vw,2.85rem);
  line-height:1.05;
  color:var(--tg-gold);
  font-weight:700;
  letter-spacing:.01em
}

.tg-titlebar p{
  margin:7px 0 0;
  color:#ddd;
  font-size:.94rem
}

.tg-kicker{
  display:block;
  color:#cfcfcf;
  font-size:.72rem;
  letter-spacing:.08em;
  margin-bottom:3px
}

.tg-content{
  padding:26px
}

.tg-intro{
  margin-bottom:24px
}

.tg-intro-lead{
  margin:0 0 12px;
  color:#f0f0f0;
  font-size:1.06rem;
  line-height:1.95;
  text-align:justify
}

.tg-intro p{
  text-align:justify
}

.tg-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:20px 0 8px
}

.tg-fact{
  background:rgba(0,0,0,.24);
  border:1px solid var(--tg-border);
  border-radius:12px;
  padding:13px 12px;
  text-align:center
}

.tg-fact strong{
  display:block;
  font-family:Tanseek,Tahoma,sans-serif;
  color:var(--tg-gold);
  font-size:1.35rem;
  line-height:1.1;
  margin-bottom:4px
}

.tg-fact span{
  display:block;
  color:#c7c7c7;
  font-size:.78rem;
  line-height:1.5
}

.tg-divider{
  height:1px;
  border:0;
  background:linear-gradient(90deg,transparent,rgba(255,204,102,.24),transparent);
  margin:24px 0
}

.tg-card,
#stepOne,
#stepTwo,
#notReady,
#playerDetails,
#waitingReceiver,
#receiverJoined,
#waitingOtherReady,
#bothReady,
#readyScreen,
#expired,
#loading,
#senderFocus,
#senderWaiting,
#senderAnswerRecorded,
#receiverWaiting,
#receiverChoice,
#receiverLocked,
#gameComplete,
#errorArea,
.hero,
.card,
.note{
  background:rgba(0,0,0,.23);
  border:1px solid var(--tg-border);
  border-radius:var(--tg-radius);
  padding:20px;
  margin:16px 0
}

.tg-question{
  color:#f3f3f3;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.9;
  margin:0 0 16px
}

.tg-step-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--tg-gold);
  font-family:Tanseek,Tahoma,sans-serif;
  font-size:1.15rem;
  margin-bottom:8px
}

.tg-step-label::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--tg-red);
  box-shadow:0 0 0 4px rgba(160,6,14,.18)
}

.hidden{
  display:none !important
}

h2,
h3{
  font-family:Tanseek,Tahoma,sans-serif;
  color:var(--tg-gold-soft);
  line-height:1.25
}

h2{
  font-size:1.65rem;
  margin:0 0 12px
}

h3{
  font-size:1.35rem;
  margin:0 0 10px
}

p{
  margin:8px 0
}

strong{
  color:var(--tg-gold-soft)
}

.tg-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px
}

button,
.tg-button{
  appearance:none;
  border:1px solid var(--tg-red);
  border-radius:8px;
  background:linear-gradient(180deg,#9d080f,#760006);
  color:var(--tg-gold);
  min-height:44px;
  padding:10px 22px;
  cursor:pointer;
  font-family:Tanseek,Roboto,Tahoma,sans-serif;
  font-size:1.2rem;
  font-weight:700;
  transition:transform .12s ease,filter .12s ease,border-color .12s ease,background .12s ease;
  box-shadow:0 5px 14px rgba(0,0,0,.23)
}

button:hover,
.tg-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  border-color:var(--tg-gold)
}

button:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid rgba(255,204,102,.7);
  outline-offset:2px
}

button:disabled{
  cursor:default;
  opacity:.48;
  transform:none;
  filter:none
}

.tg-button-secondary{
  background:#171717;
  border-color:#555;
  color:var(--tg-link);
  box-shadow:none
}

.tg-button-secondary:hover{
  border-color:var(--tg-link);
  color:#cfe6ff
}

.tg-form-intro{
  color:#ccc;
  font-size:.9rem;
  margin-bottom:18px
}

.tg-player-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.tg-player-panel{
  background:rgba(0,0,0,.18);
  border:1px solid var(--tg-border);
  border-radius:14px;
  padding:16px
}

.tg-player-panel h3{
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.07)
}

.field{
  margin:14px 0
}

label{
  display:block;
  color:#e8e8e8;
  font-size:.88rem;
  margin:0 0 6px;
  font-weight:700
}

input[type="text"],
input[type="email"],
select{
  width:100%;
  min-height:44px;
  border:1px solid #4a4a4a;
  border-radius:7px;
  background:#1f1f1f;
  color:#f1f1f1;
  padding:9px 11px;
  font-size:.92rem;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}

input::placeholder{
  color:#777
}

input:hover,
select:hover{
  border-color:#666
}

input:focus,
select:focus{
  border-color:var(--tg-gold);
  box-shadow:0 0 0 3px rgba(255,204,102,.10);
  background:#191919
}

select{
  color:var(--tg-gold-soft);
  cursor:pointer
}

.tg-form-wide{
  margin-top:16px
}

.privacy{
  background:rgba(255,204,102,.045);
  border:1px solid var(--tg-gold-border);
  border-radius:12px;
  padding:15px;
  margin:20px 0
}

.privacy > strong{
  display:block;
  color:var(--tg-gold);
  margin-bottom:6px
}

.privacy p{
  color:#bbb;
  font-size:.82rem;
  line-height:1.75
}

.privacy label{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:#ddd;
  font-size:.82rem;
  font-weight:400;
  margin-top:12px
}

.privacy input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--tg-red);
  margin-top:4px;
  flex:0 0 auto
}

.error,
#errorArea{
  background:rgba(160,6,14,.16);
  border:1px solid rgba(255,93,103,.42);
  color:#ffd4d6;
  border-radius:12px;
  padding:13px 15px;
  margin:0 0 18px
}

.note,
.tg-note{
  color:#aaa
}

.tg-pair{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:15px 0
}

.tg-person{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 13px;
  border:1px solid var(--tg-border);
  border-radius:999px;
  background:#161616;
  color:var(--tg-gold-soft);
  font-weight:700
}

.tg-connector{
  color:var(--tg-red);
  font-size:1.25rem
}

.tg-status{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  color:#bbb;
  font-size:.88rem;
  margin-top:12px
}

.tg-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--tg-gold);
  box-shadow:0 0 0 5px rgba(255,204,102,.09);
  animation:tgPulse 1.8s ease-in-out infinite
}

@keyframes tgPulse{
  0%,100%{opacity:.45;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}

#roleTitle{
  text-align:center;
  margin:0 0 8px;
  color:var(--tg-gold);
  font-size:1.75rem
}

#roundCounter{
  width:max-content;
  max-width:100%;
  margin:0 auto 18px;
  padding:5px 13px;
  border:1px solid rgba(255,204,102,.18);
  border-radius:999px;
  background:rgba(255,204,102,.055);
  color:#d7d7d7;
  font-size:.82rem;
  font-weight:700
}

#loading,
#senderFocus,
#senderWaiting,
#senderAnswerRecorded,
#receiverWaiting,
#receiverChoice,
#receiverLocked,
#gameComplete,
#errorArea{
  text-align:center;
  max-width:650px;
  margin:16px auto
}

#targetSymbol{
  display:flex;
  align-items:center;
  justify-content:center;
  width:180px;
  height:180px;
  margin:28px auto;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,204,102,.10),transparent 65%),
    #111;
  border:1px solid rgba(255,204,102,.30);
  color:var(--tg-gold);
  font-size:7rem;
  line-height:1;
  box-shadow:
    inset 0 0 28px rgba(255,204,102,.035),
    0 18px 40px rgba(0,0,0,.35)
}

#choices{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin:24px auto 4px;
  max-width:620px
}

.choiceButton{
  width:100%;
  min-width:0;
  aspect-ratio:1/1;
  min-height:auto;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(255,204,102,.22);
  background:#151515;
  color:var(--tg-gold);
  font-family:Arial,sans-serif;
  font-size:clamp(2.2rem,7vw,3.5rem);
  font-weight:400;
  box-shadow:none
}

.choiceButton:hover{
  background:#211b13;
  border-color:var(--tg-gold);
  transform:translateY(-2px)
}

.hero,
.card,
.note{
  background:rgba(0,0,0,.23)
}

.hero{
  text-align:center;
  padding:28px
}

.level{
  font-family:Tanseek,Tahoma,sans-serif;
  color:var(--tg-gold);
  font-size:2rem;
  font-weight:700;
  margin:8px 0
}

.score{
  color:#fff;
  font-size:2.8rem;
  font-weight:700;
  line-height:1.1;
  margin:10px 0
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.metric{
  color:var(--tg-gold-soft);
  font-size:1.4rem;
  font-weight:700;
  text-align:center
}

.direction-title{
  font-family:Tanseek,Tahoma,sans-serif;
  color:var(--tg-gold);
  font-size:1.45rem;
  font-weight:700;
  text-align:center
}

.muted,
.disclaimer{
  color:#aaa
}

.comparison{
  margin:18px 0
}

.bar-track{
  position:relative;
  height:16px;
  overflow:hidden;
  border-radius:999px;
  background:#111;
  border:1px solid #333;
  margin-top:9px
}

.bar{
  height:100%;
  background:linear-gradient(90deg,#850007,#a0060e 55%,#ffcc66);
  border-radius:999px
}

.chance-line{
  color:#aaa;
  font-size:.78rem;
  margin-top:7px
}

.highlight{
  color:var(--tg-gold-soft);
  font-weight:700
}

.stat-box{
  border-right:4px solid var(--tg-red);
  padding:10px 14px 10px 0;
  margin-top:18px;
  background:rgba(160,6,14,.06)
}

.disclaimer{
  border-top:1px dashed rgba(255,255,255,.10);
  padding-top:14px;
  margin-top:16px;
  font-size:.77rem;
  line-height:1.8
}

.tg-centered{
  text-align:center
}

.tg-small{
  font-size:.8rem;
  color:#999
}

@media (max-width:700px){
  body{
    font-size:15px
  }

  .tg-page{
    width:min(100% - 18px,920px);
    padding:12px 0 28px
  }

        .tg-shell{
    border-radius:14px
  }

  .tg-titlebar{
    padding:17px 16px 15px
  }

  .tg-titlebar h1{
    font-size:2.05rem
  }

  .tg-content{
    padding:16px
  }

  .tg-intro-lead{
    font-size:.93rem
  }

  .tg-facts{
    grid-template-columns:1fr;
    gap:8px
  }

  .tg-fact{
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:right;
    padding:10px 12px
  }

  .tg-fact strong{
    margin:0;
    font-size:1.15rem
  }

  .tg-player-grid,
  .grid{
    grid-template-columns:1fr
  }

  #choices{
    grid-template-columns:repeat(3,1fr);
    max-width:360px
  }

  .choiceButton{
    font-size:3rem
  }

  #targetSymbol{
    width:150px;
    height:150px;
    font-size:5.6rem
  }

  .tg-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px
  }

  .tg-actions button,
  .tg-actions .tg-button{
    width:100%;
    margin:0
  }
}

@media (max-width:380px){
  #choices{
    grid-template-columns:repeat(2,1fr);
    max-width:250px
  }
}

.tg-shell{
  width:min(920px,100%);
  margin-left:auto;
  margin-right:auto
}

@media (max-width:700px){
  .tg-page{
    width:min(100% - 10px,980px);
    padding-top:6px
  }

  #paheader.tg-site-header{
    margin-bottom:8px
  }
}


/* Visual correction for the filled star glyph.
   ★ has a much larger visual footprint than the other symbols
   at the same nominal font-size. */
#targetSymbol.targetSymbolStar{
  font-size:5.4rem;
}

.choiceButton.choiceButtonStar{
  font-size:2.75rem;
}

@media (max-width:700px){
  #targetSymbol.targetSymbolStar{
    font-size:4.45rem;
  }

  .choiceButton.choiceButtonStar{
    font-size:2.35rem;
  }
}