:root{
  --bg:#0b0b0f;
  --card:#12121a;
  --text:#e9e9f2;
  --muted:#a7a7b7;
  --line:rgba(255,255,255,.12);
  --danger:#d63c3c;
  --ok:#2fb56f;
  --warn:#e0b200;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -100px, rgba(255,255,255,.10), transparent 55%), var(--bg);
  color:var(--text);
}
a{color:inherit}
.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px;
}
.header h1{
  margin: 0 0 16px 0;
  font-size: 28px;
}
.wheel-wrap{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.wheel-stage{
  position:relative;
  width:520px;
  height:520px;
}
.pointer{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:34px solid #fff;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.55));
  z-index:10;
}
.controls{
  min-width: 240px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hint{color:var(--muted); font-size: 13px;}
.btn{
  appearance:none;
  border:0;
  background:#fff;
  color:#111;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor:pointer;
}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn.secondary{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn.danger{background: var(--danger); color:#fff}
.btn.tiny{padding:7px 10px; border-radius:8px; font-weight:700; font-size: 12px;}

.result{margin-top:20px;}
.result-box{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 16px;
  min-height: 70px;
}
.result-box.win{border-color: rgba(47,181,111,.35)}
.result-box.lose{border-color: rgba(214,60,60,.35)}
.result-title{font-weight:900; margin-bottom: 6px;}
.result-prize{font-size: 20px; font-weight: 900;}
.result-desc{margin-top: 8px; margin-bottom: 25px; color: var(--muted)}
.result-img{display:block; margin: 15px auto; max-width: 240px; height:auto; border-radius: 12px; border:1px solid var(--line)}

.footer{margin-top:18px; color: var(--muted); font-size: 13px;}
.admin-link{color: var(--muted); text-decoration: none}
.admin-link:hover{text-decoration: underline}

.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 16px;
}
label{display:block; margin: 10px 0;}
input[type="text"], input[type="password"], input[type="number"], input[type="email"], textarea, select{
  width:100%;
  margin-top:6px;
  background: rgba(0,0,0,.25);
  color: var(--text);
  border:1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
textarea{resize:vertical}
.table{
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th,.table td{
  text-align:left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}
.color-dot{
  display:inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border:1px solid rgba(0,0,0,.35);
  vertical-align: middle;
}
.notice{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.notice.error{border-color: rgba(214,60,60,.35)}
.notice.success{border-color: rgba(47,181,111,.35)}
.notice.warning{border-color: rgba(224,178,0,.35)}
.notice.info{border-color: rgba(255,255,255,.18)}
.admin-top{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
  flex-wrap:wrap;
}
.admin-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.checkbox{display:flex; align-items:center; gap:10px}
.preview{margin-top:10px; color: var(--muted);}


.maincontent {
    padding-bottom: 100px;
}
.footercontent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #062A1E;
    padding: 5px 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #555555;
}
.flink {
    font-size: 12px;
    text-decoration: none;
    margin-right: 15px;
}
.fimg img {
    height: 15px;
    width: auto;
}
@media (max-width: 640px){
  .wheel-stage{width: 320px; height: 320px;}
  #wheelCanvas{width: 320px; height: 320px;}
  .grid-2{grid-template-columns:1fr;}
}

/* --- Premium pointer glow + tick shake (addon) --- */
.pointer{
  top:-8px;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-top:36px solid #ffffff;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.7))
          drop-shadow(0 6px 10px rgba(0,0,0,0.6));
  transition: transform .08s;
}
.pointer.tick{
  transform: translateX(-50%) rotate(-8deg);
}

/* --- Wheel layout (responsive) --- */
.wheel-wrap{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 14px;
}

:root{
  --wheel-size: clamp(260px, 90vw, 700px);
}

.wheel-stage{
  position:relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  margin: 0 auto;
}

#wheelCanvas{
  display:block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* Pointer premium */
.pointer{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-top:36px solid #ffffff;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.7))
          drop-shadow(0 6px 10px rgba(0,0,0,0.6));
  transition: transform .08s;
  z-index:10;
}
.pointer.tick{
  transform: translateX(-50%) rotate(-8deg);
}

.controls{
  min-width: unset;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
}

.result{
  width: 100%;
  display:flex;
  justify-content:center;
}

.result-box{
  width: min(720px, 100%);
  text-align:center;
}

/* --- Claim form --- */
.claim-wrap{
  margin-top: 0px;
  width: 100%;
  max-width: 520px;
}
.claim-wrap .card{
  text-align:left;
}
.claim-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px){
  .claim-wrap{ max-width: 100%; }
  .claim-grid{ grid-template-columns: 1fr; }
.result {flex-direction: column !important;}
}

/* --- Frontend header title/subtitle --- */
.header{
  text-align:center;
  width:100%;
  margin-bottom: 18px;
}
.page-title{
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
}
.page-subtitle{
  margin: 15px 0 25px 0;
  font-size: 16px;
  color: var(--muted);
}