:root{
  --phg-bg:#120f07;
  --phg-gold-1:#f2d27b;
  --phg-gold-2:#bb8f2a;
  --phg-ink:#0b0e1a;
  --phg-white:#f8f5e7;
  --phg-amber:#ffc24c;
  --phg-danger:#ff6b6b;
  --phg-success:#35d0a0;
  --phg-muted:#8a816d;
  --phg-card:#1e180c;
  --phg-shadow:0 12px 30px rgba(0,0,0,.45);
}

/* È­¸é ¹Ù±ùÀ¸·Î ¾È°³°¡ ¹øÁöÁö ¾Ê°Ô ÄÁÅ×À̳ʿ¡¸¸ ¹è°æ */
.phg-panel{
  position:relative;
  border-radius:18px;
  padding:16px;
  background: radial-gradient(1200px 400px at 50% -200px, rgba(255,210,120,.22), transparent 60%),
              linear-gradient(180deg, #221a0a 0%, #171107 60%, #120f07 100%);
  color:var(--phg-white);
  box-shadow:var(--phg-shadow);
  overflow:hidden;
}

.phg-title{
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight:800;
  letter-spacing:.06em;
  font-size:28px;
  color:#0b0e1a;
  text-shadow:
    0 1px 0 #e9d69b,
    0 0 24px rgba(255, 207, 64, .35),
    -1px -1px 0 rgba(255,255,255,.25);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

.phg-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg, var(--phg-gold-1), var(--phg-gold-2));
  color:#1b1202;border-radius:14px;padding:8px 12px;font-weight:700;box-shadow:var(--phg-shadow);
}

.phg-chip{
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff5, transparent 35%), 
             linear-gradient(180deg, #ffe7a8, #f0c65a 60%, #d59f32);
  border:3px solid #b48428;color:#0b0e1a;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 16px rgba(0,0,0,.35), inset 0 2px 4px #fff6;
  cursor:pointer;transition:transform .08s ease, box-shadow .2s ease;
}
.phg-chip:hover{ transform:translateY(-2px); }
.phg-chip.is-active{ outline:3px solid #fff8; }

.phg-coin-card{
  width:120px;border-radius:14px;padding:10px 10px 14px;
  background:linear-gradient(145deg, #ffdf83, #f08b2c);
  box-shadow:var(--phg-shadow);
  text-align:center;color:#211600;
}
.phg-coin-card .phg-digit{
  margin-top:8px;height:86px;border-radius:10px;
  background: #000;border:3px solid #ffd24c;display:flex;align-items:center;justify-content:center;
  color:#ffd24c;font-weight:900;font-size:42px;letter-spacing:.02em;
  box-shadow: inset 0 0 15px #f18a1a;
}

.phg-grid{display:grid;gap:14px;}
.phg-grid.cols-7{grid-template-columns: repeat(7, minmax(0,1fr));}
.phg-input7{display:grid;grid-template-columns:repeat(7, 84px);gap:8px;justify-content:center}
.phg-input7 input{
  width:84px;height:84px;border-radius:12px;border:2px solid #ffd24c;background:#1c160a;
  color:#ffd24c;font-size:38px;text-align:center;font-weight:800;outline:none;
}
.phg-input7 input:focus{ box-shadow:0 0 0 3px #fff5, inset 0 0 0 1px #000; }

.phg-btn{
  border:0;border-radius:12px;padding:14px 18px;font-weight:800;cursor:pointer;
  color:#1b1202;background:linear-gradient(180deg, #ffd978, #e8b246 60%, #cf8e2d);
  box-shadow:var(--phg-shadow);
}
.phg-btn:disabled{opacity:.6;cursor:not-allowed}

.phg-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.phg-space{height:12px}