:root{
  --primary:#A11729;--secondary:#C6A24A;--accent:#7A1722;--text:#FFF4E2;--panel:#0C0608;--glow:#E43A4B;--pin:#D92B3E;--avatarRing:#D9BC78;--ticker:#19080A;
  --primary-rgb:161,23,41;--secondary-rgb:198,162,74;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030303;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
body{background:radial-gradient(circle at 50% -10%,rgba(var(--primary-rgb),.22),transparent 34%),linear-gradient(180deg,#060606,#020202)}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.shell{min-height:100vh;padding:16px;position:relative;overflow:hidden}
.shell:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 10%,rgba(var(--secondary-rgb),.08),transparent 28%),radial-gradient(circle at 80% 18%,rgba(var(--primary-rgb),.10),transparent 32%);z-index:0}
.shell>*{position:relative;z-index:1}
.topbar{height:84px;border:1px solid rgba(var(--secondary-rgb),.7);box-shadow:0 0 20px rgba(var(--primary-rgb),.35),inset 0 0 22px rgba(var(--primary-rgb),.10);background:linear-gradient(180deg,rgba(20,7,6,.96),rgba(6,6,6,.95));border-radius:20px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:20px}
.brand-kicker{font-weight:1000;color:var(--secondary);letter-spacing:.12em;text-transform:uppercase;font-size:12px}.brand-title{font-size:clamp(22px,2.6vw,44px);font-weight:1000;line-height:.95;text-transform:uppercase;text-shadow:0 0 14px rgba(var(--secondary-rgb),.2)}
.brand-title span{color:var(--secondary)}.brand-sub{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#ddd;margin-top:6px}.live-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--primary);background:rgba(var(--primary-rgb),.13);padding:11px 16px;border-radius:14px;font-weight:900}.live-dot{width:12px;height:12px;background:#ff3131;border-radius:50%;box-shadow:0 0 18px #ff2d2d;animation:pulse 1.3s infinite}.clock-chip{font-weight:900;color:var(--secondary);text-align:right}.clock-chip small{display:block;color:#aaa;font-weight:700}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.panel{background:linear-gradient(180deg,rgba(15,9,8,.97),rgba(5,5,5,.97));border:1px solid rgba(var(--primary-rgb),.72);border-radius:18px;box-shadow:0 0 22px rgba(var(--primary-rgb),.12),inset 0 0 22px rgba(255,255,255,.015)}
.panel.gold{border-color:rgba(var(--secondary-rgb),.72)}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(var(--primary-rgb),.35);font-weight:1000;text-transform:uppercase;letter-spacing:.05em}.panel-body{padding:16px}
.btn{border:1px solid var(--primary);background:linear-gradient(180deg,rgba(var(--primary-rgb),.25),rgba(25,4,4,.85));color:#fff;padding:12px 16px;border-radius:12px;font-weight:900;box-shadow:0 0 16px rgba(var(--primary-rgb),.15)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn.gold{border-color:var(--secondary);background:linear-gradient(180deg,rgba(var(--secondary-rgb),.24),rgba(35,25,4,.82));color:var(--secondary)}.btn.green{border-color:#45d483;background:linear-gradient(180deg,rgba(55,180,105,.28),rgba(3,34,18,.9));color:#bfffd7}.btn.ghost{background:#090909;border-color:#444;color:#ddd}.btn.big{padding:17px 20px;font-size:18px}.btn.full{width:100%}
.grid{display:grid;gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#d9c999;font-weight:900}.field input,.field select,.field textarea{width:100%;background:#050505;border:1px solid #474747;border-radius:10px;color:#fff;padding:11px 12px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--secondary);box-shadow:0 0 0 2px rgba(var(--secondary-rgb),.12)}
.stat{padding:11px 14px;border-radius:12px;background:#060606;border:1px solid #2b2b2b}.stat b{font-size:20px;color:var(--secondary)}.stat small{display:block;color:#999;margin-top:3px}
.switch{position:relative;display:inline-flex;width:48px;height:26px}.switch input{display:none}.switch span{position:absolute;inset:0;background:#333;border-radius:999px;border:1px solid #555}.switch span:after{content:"";position:absolute;width:20px;height:20px;top:2px;left:3px;background:#fff;border-radius:50%;transition:.18s}.switch input:checked+span{background:var(--primary);box-shadow:0 0 14px rgba(var(--primary-rgb),.5)}.switch input:checked+span:after{left:23px}
.row{display:flex;align-items:center;gap:10px}.row.between{justify-content:space-between}.muted{color:#9e9e9e}.gold-text{color:var(--secondary)}.red-text{color:#ff4b56}.tiny{font-size:11px}.small{font-size:13px}
.notice{padding:12px 14px;border-radius:12px;background:rgba(var(--secondary-rgb),.07);border:1px solid rgba(var(--secondary-rgb),.28);color:#e8dbb4}.error{background:#2a0707;border-color:#b91c1c;color:#ffd0d0}.success{background:#052315;border-color:#2f9e61;color:#d1ffe5}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--avatarRing)}.avatar-fallback{display:flex;align-items:center;justify-content:center;background:#25120f;color:var(--secondary);font-weight:1000}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:9px 10px;border-bottom:1px solid #272727;text-align:left;font-size:13px}.data-table th{color:#bcae87;text-transform:uppercase;font-size:10px;letter-spacing:.08em}.data-table tr:hover td{background:rgba(var(--secondary-rgb),.03)}

/* Map */
.world-map{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 55%,#172011 0,#07100c 34%,#02060b 80%);border-radius:18px;min-height:420px;border:1px solid rgba(var(--secondary-rgb),.35)}
.world-base{position:absolute;inset:0}.world-svg,.night-canvas,.pin-layer,.map-glow{position:absolute;inset:0;width:100%;height:100%}.world-svg path{fill:#382f16;stroke:#b99032;stroke-width:.7;vector-effect:non-scaling-stroke}.world-svg{filter:drop-shadow(0 0 4px rgba(var(--secondary-rgb),.15))}.night-canvas{image-rendering:auto;pointer-events:none}.map-glow{pointer-events:none;background:radial-gradient(circle at 25% 30%,rgba(var(--secondary-rgb),.12),transparent 25%),radial-gradient(circle at 70% 50%,rgba(var(--primary-rgb),.08),transparent 28%);mix-blend-mode:screen}.pin-layer{pointer-events:none}.world-pin{position:absolute;transform:translate(-50%,-100%);width:34px;height:34px;border-radius:50%;padding:0;border:3px solid var(--avatarRing);background:var(--pin);box-shadow:0 0 14px var(--pin),0 0 26px rgba(var(--primary-rgb),.35);z-index:4;pointer-events:auto}.world-pin .pin-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:10px;background:#1f0b08;color:#fff}.world-pin .pin-tail{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--pin);border-right:2px solid var(--avatarRing);border-bottom:2px solid var(--avatarRing);z-index:-1}.world-pin.newest:before{content:"";position:absolute;inset:-12px;border:2px solid var(--secondary);border-radius:50%;animation:ripple 1.4s infinite}@keyframes ripple{0%{transform:scale(.65);opacity:1}100%{transform:scale(1.7);opacity:0}}

/* live screen */
.live-page{height:100vh;overflow:hidden;background:#010101}.live-wrap{position:fixed;inset:0;display:grid;grid-template-rows:108px 1fr 152px;background:#020202}.live-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:2px solid var(--primary);background:linear-gradient(180deg,#120807,#050505);box-shadow:0 3px 22px rgba(var(--primary-rgb),.35);z-index:9}.live-brand{text-align:center;flex:1}.live-brand h1{margin:0;font-size:clamp(28px,3.6vw,64px);text-transform:uppercase;line-height:.9;color:var(--secondary);text-shadow:0 0 15px rgba(var(--secondary-rgb),.22)}.live-brand p{margin:8px 0 0;letter-spacing:.28em;text-transform:uppercase;font-size:clamp(8px,1vw,15px);color:#ddd}.live-main{position:relative;min-height:0}.live-main .world-map{position:absolute;inset:0;border-radius:0;border:0;min-height:0}.featured-card{position:absolute;left:4%;top:8%;z-index:10;width:min(440px,34vw);background:rgba(7,5,5,.93);border:2px solid var(--primary);border-radius:18px;padding:14px 16px;box-shadow:0 0 28px rgba(var(--primary-rgb),.5);display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center}.featured-card .avatar{width:70px;height:70px}.featured-name{font-weight:1000;font-size:clamp(18px,2vw,32px)}.featured-location{color:#d6c9a7;font-weight:800}.featured-time{color:var(--secondary);font-size:clamp(18px,2.1vw,34px);font-weight:1000}.sound-badge{position:absolute;right:2.2%;top:3%;z-index:12;padding:10px 14px;border:1px solid var(--primary);border-radius:12px;background:rgba(30,5,5,.9);font-weight:900;opacity:0;transform:translateY(-8px);transition:.25s}.sound-badge.show{opacity:1;transform:none}.live-footer{display:grid;grid-template-columns:minmax(360px,1.25fr) 2fr;gap:12px;padding:12px 18px;border-top:2px solid var(--primary);background:linear-gradient(180deg,#120807,#030303);z-index:8}.join-card{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:12px;border:1px solid var(--secondary);border-radius:15px;padding:8px 12px;background:#070707}.qr{width:86px;height:86px;background:#fff;border:4px solid var(--secondary);border-radius:9px;object-fit:cover}.join-title{font-size:22px;font-weight:1000;color:var(--secondary);text-transform:uppercase}.ticker{overflow:hidden;border:1px solid rgba(var(--primary-rgb),.7);border-radius:15px;background:var(--ticker);display:flex;align-items:center;padding:8px 12px;gap:14px}.ticker-title{font-weight:1000;color:var(--secondary);white-space:nowrap}.ticker-track{display:flex;gap:12px;min-width:max-content;animation:tickerMove 34s linear infinite}.ticker-item{display:flex;align-items:center;gap:8px;padding-right:14px;border-right:1px solid #513321}.ticker-item .avatar{width:36px;height:36px}.ticker-item b{white-space:nowrap}.ticker-item small{display:block;color:#c8baa0;white-space:nowrap}@keyframes tickerMove{from{transform:translateX(10%)}to{transform:translateX(-65%)}}

/* host */
.host-layout{display:grid;grid-template-columns:250px 1fr;gap:14px;margin-top:14px}.sidebar{padding:12px;min-height:calc(100vh - 128px)}.side-brand{padding:12px;border-bottom:1px solid #2b2b2b;margin-bottom:8px}.nav-btn{display:flex;width:100%;align-items:center;gap:10px;padding:12px;border:0;border-radius:10px;background:transparent;color:#ddd;font-weight:850;text-align:left}.nav-btn.active,.nav-btn:hover{background:rgba(var(--primary-rgb),.17);color:#fff}.main-area{display:grid;gap:14px}.action-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.action-card{padding:16px;min-height:115px}.action-card h3{margin:0 0 8px;font-size:16px;color:var(--secondary)}.host-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}.preview-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000}.login-gate{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:20px}.login-card{width:min(520px,94vw);padding:24px}.login-card h1{margin:0 0 10px;color:var(--secondary)}

/* setup */
.setup-layout{display:grid;grid-template-columns:minmax(440px,1fr) minmax(520px,1.2fr);gap:14px;margin-top:14px}.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.theme-card{border:1px solid #333;border-radius:12px;padding:8px;background:#090909;color:#fff;text-align:left}.theme-card.active{border-color:var(--secondary);box-shadow:0 0 18px rgba(var(--secondary-rgb),.25)}.theme-swatch{height:58px;border-radius:8px;margin-bottom:7px}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.color-row{display:grid;grid-template-columns:1fr 54px;gap:8px;align-items:center;background:#070707;border:1px solid #2c2c2c;border-radius:10px;padding:8px}.color-row input[type=color]{width:54px;height:34px;border:0;background:none;padding:0}.toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.toggle-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid #2b2b2b;border-radius:10px;background:#070707}.concept-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.concept-strip img{width:100%;border-radius:10px;border:1px solid #3a2a12}

/* check-in */
.checkin-shell{max-width:900px;margin:auto;padding:14px;min-height:100vh}.checkin-hero{text-align:center;padding:16px 8px}.checkin-hero h1{font-size:clamp(28px,7vw,56px);margin:0;color:var(--secondary);text-transform:uppercase;line-height:.95}.checkin-hero p{color:#c6b990;letter-spacing:.09em}.still-game{padding:12px 14px;margin:10px 0;border:1px solid var(--primary);border-radius:13px;background:rgba(var(--primary-rgb),.10);font-weight:900}.checkin-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.avatar-picker{display:flex;align-items:center;gap:14px}.avatar-preview{width:88px;height:88px;border-radius:50%;border:3px solid var(--avatarRing);object-fit:cover;background:#130908;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:1000;color:var(--secondary)}.mini-map{height:310px}.save-checkin{font-size:clamp(20px,5vw,34px);padding:20px;margin-top:14px}.confirm-box{padding:16px;text-align:center}.confirm-box h2{margin:0;color:var(--secondary)}

@media(max-width:1000px){.host-layout{grid-template-columns:1fr}.sidebar{min-height:auto}.action-row{grid-template-columns:repeat(2,1fr)}.host-grid,.setup-layout,.checkin-grid{grid-template-columns:1fr}.theme-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.shell{padding:8px}.topbar{height:auto;min-height:76px;padding:10px 12px}.clock-chip{display:none}.live-chip{padding:8px 10px}.brand-title{font-size:21px}.brand-sub{letter-spacing:.12em}.grid.two,.grid.three,.grid.four,.action-row,.color-grid,.toggle-grid{grid-template-columns:1fr}.theme-grid{grid-template-columns:repeat(2,1fr)}.host-layout,.setup-layout{margin-top:8px}.checkin-shell{padding:8px}.live-footer{grid-template-columns:1fr}.ticker{display:none}.live-wrap{grid-template-rows:82px 1fr 120px}.join-card{grid-template-columns:68px 1fr}.qr{width:64px;height:64px}.featured-card{width:min(88vw,420px);left:3%;top:4%}}
/* CK405 FRIENDS CHECKIN PAGE CLEANUP V1 START */
html,body{overflow-x:hidden}
.checkin-shell{
  width:min(1180px,calc(100% - 32px));
  max-width:none;
  margin:0 auto;
  padding:22px 0 34px;
}
.checkin-hero{padding:10px 14px 8px}
.checkin-hero .brand-kicker{font-size:13px;letter-spacing:.15em}
.checkin-hero h1{font-size:clamp(34px,4.4vw,64px);line-height:.94;margin-top:5px}
.checkin-hero p{margin:10px 0 0;font-size:clamp(12px,1.25vw,17px);font-weight:850;letter-spacing:.12em}
.still-game{margin:10px 0 16px;padding:11px 16px;text-align:center}
.checkin-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  gap:18px;
  align-items:start;
}
.checkin-grid>.panel{min-width:0;overflow:hidden}
.checkin-grid>.panel:last-child{position:sticky;top:14px}
.checkin-grid .panel-head{padding:14px 18px;gap:12px;flex-wrap:wrap}
.checkin-grid .panel-body{padding:18px}
.checkin-grid .grid{gap:15px}
.avatar-picker{align-items:flex-start;gap:16px}
.avatar-preview{width:96px;height:96px;flex:0 0 96px;font-size:25px}
.field label{font-size:13px;letter-spacing:.085em}
.field input,.field select,.field textarea{min-height:52px;padding:13px 14px;font-size:18px;border-radius:12px}
.field input[type=file]{min-height:56px;padding:8px 10px;line-height:36px}
.field input[type=file]::file-selector-button{margin-right:12px;border:1px solid #555;border-radius:9px;background:#f3f3f3;color:#111;padding:8px 12px;font-weight:800;cursor:pointer}
.checkin-grid .row{align-items:flex-start;flex-wrap:wrap}
#deviceLocBtn{min-height:54px;white-space:normal;text-align:center}
#deviceLocStatus{flex:1;min-width:210px;padding-top:8px;line-height:1.35}
.mini-map{
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:2 / 1;
  border-radius:16px;
}
.mini-map .world-svg path{fill:rgba(var(--secondary-rgb),.09);stroke:rgba(var(--secondary-rgb),.78);stroke-width:.72}
.mini-map .map-glow{background:radial-gradient(circle at 24% 34%,rgba(var(--secondary-rgb),.11),transparent 28%),radial-gradient(circle at 66% 48%,rgba(var(--primary-rgb),.07),transparent 30%)}
#previewNote{line-height:1.35}
.save-checkin{font-size:clamp(22px,2.1vw,31px);padding:17px 20px;margin-top:18px;border-radius:14px}
.checkin-shell>.row.between{gap:14px;align-items:center;flex-wrap:wrap}
.checkin-shell>.row.between .small{flex:1;min-width:250px;text-align:right;line-height:1.35}
.confirm-box{margin-bottom:10px}
@media(max-width:960px){
  .checkin-shell{width:min(760px,calc(100% - 24px));padding-top:14px}
  .checkin-grid{grid-template-columns:1fr}
  .checkin-grid>.panel:last-child{position:static}
  .mini-map{aspect-ratio:2 / 1}
}
@media(max-width:640px){
  .checkin-shell{width:calc(100% - 16px);padding:8px 0 24px}
  .checkin-hero{padding:8px 6px 6px}
  .checkin-hero h1{font-size:clamp(31px,10vw,46px)}
  .still-game{margin:8px 0 12px;font-size:14px;line-height:1.3}
  .checkin-grid{gap:12px}
  .checkin-grid .panel-head{padding:12px 13px;font-size:14px}
  .checkin-grid .panel-head .tiny{font-size:9px}
  .checkin-grid .panel-body{padding:13px}
  .avatar-picker{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px}
  .avatar-preview{width:78px;height:78px;flex-basis:78px;font-size:21px}
  .field input,.field select,.field textarea{font-size:17px;min-height:50px}
  #deviceLocBtn{width:100%}
  #deviceLocStatus{min-width:100%;padding:2px 2px 0}
  .mini-map{aspect-ratio:2 / 1;border-radius:13px}
  .save-checkin{font-size:21px;padding:16px 12px}
  .checkin-shell>.row.between{display:grid;grid-template-columns:1fr}
  .checkin-shell>.row.between .btn{width:100%}
  .checkin-shell>.row.between .small{min-width:0;text-align:center;font-size:11px}
}
/* CK405 FRIENDS CHECKIN PAGE CLEANUP V1 END */
/* CK405 FRIENDS PUBLIC IDENTITY PICKER + THEME PACK V1 START */
:root{
  --bg0:#050203;--bg1:#25070D;--panel2:#18070A;--border:#7A4E1F;--highlight:#F2DEB0;--muted:#C3A06A;
}
html,body{
  background:
    radial-gradient(circle at 14% -8%,rgba(var(--primary-rgb),.24),transparent 30%),
    radial-gradient(circle at 88% 4%,rgba(var(--secondary-rgb),.12),transparent 30%),
    linear-gradient(180deg,var(--bg1),var(--bg0) 44%,#020202);
}
.panel{
  background:linear-gradient(145deg,var(--panel2),var(--panel) 58%,var(--bg0));
  border-color:var(--border);
  box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025);
}
.panel.gold{box-shadow:0 0 0 1px rgba(var(--secondary-rgb),.2),0 12px 34px rgba(0,0,0,.28),0 0 22px rgba(var(--primary-rgb),.10)}
.panel-head{background:linear-gradient(90deg,rgba(var(--primary-rgb),.12),rgba(var(--secondary-rgb),.055),transparent)}
.muted,.tiny.muted{color:var(--muted)!important}
.gold-text{color:var(--secondary)!important}
.field input,.field select,.field textarea{background:linear-gradient(180deg,var(--panel2),var(--bg0));border-color:var(--border);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--secondary);box-shadow:0 0 0 3px rgba(var(--secondary-rgb),.10),0 0 18px rgba(var(--primary-rgb),.12)}
.identity-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:15px}
.identity-privacy{border-color:var(--border);background:linear-gradient(90deg,rgba(var(--primary-rgb),.08),rgba(var(--secondary-rgb),.045));line-height:1.42}
.identity-badge{display:inline-flex;align-items:center;margin-top:4px;padding:3px 8px;border:1px solid var(--border);border-radius:999px;background:rgba(var(--primary-rgb),.10);color:var(--highlight);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.theme-card{background:linear-gradient(145deg,var(--panel2),var(--panel));border-color:var(--border);min-height:126px}
.theme-card:hover{transform:translateY(-1px);border-color:var(--secondary)}
.theme-card .theme-note{font-size:10px;line-height:1.25;color:var(--muted);margin-top:5px}
.theme-swatch{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 8px 18px rgba(0,0,0,.25)}

html[data-fw-theme="marine"] body{
  background:
    radial-gradient(circle at 12% 2%,rgba(161,23,41,.34),transparent 30%),
    radial-gradient(circle at 86% 4%,rgba(198,162,74,.17),transparent 28%),
    radial-gradient(circle at 50% 24%,rgba(242,222,176,.045),transparent 19%),
    linear-gradient(180deg,#2A0810,#050203 68%);
}
html[data-fw-theme="marine"] .panel{
  background:
    linear-gradient(145deg,#1B080C,#0C0608 58%,#050203);
  border-color:#7A4E1F;
  box-shadow:
    0 0 0 1px rgba(198,162,74,.08),
    0 14px 36px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 36px rgba(161,23,41,.05);
}
html[data-fw-theme="marine"] .panel.gold{
  box-shadow:
    0 0 0 1px rgba(217,188,120,.18),
    0 14px 36px rgba(0,0,0,.34),
    0 0 22px rgba(161,23,41,.12),
    inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-fw-theme="marine"] .panel-head{
  background:linear-gradient(90deg,rgba(161,23,41,.22),rgba(198,162,74,.10),transparent 74%);
}
html[data-fw-theme="marine"] .brand-title,
html[data-fw-theme="marine"] .checkin-hero h1{
  text-shadow:0 0 20px rgba(161,23,41,.22),0 0 12px rgba(198,162,74,.10);
}
html[data-fw-theme="marine"] .brand-title span,
html[data-fw-theme="marine"] .gold-text{
  color:#D8BB77 !important;
}
html[data-fw-theme="marine"] .live-chip,
html[data-fw-theme="marine"] .still-game,
html[data-fw-theme="marine"] .identity-privacy{
  background:linear-gradient(90deg,rgba(161,23,41,.16),rgba(198,162,74,.055));
}
html[data-fw-theme="marine"] .btn{
  border-color:#A11729;
  background:linear-gradient(180deg,rgba(161,23,41,.34),rgba(38,7,12,.92));
  box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-fw-theme="marine"] .btn.gold{
  border-color:#D9BC78;
  background:linear-gradient(180deg,rgba(198,162,74,.30),rgba(61,40,10,.84));
  color:#F6E5BA;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
html[data-fw-theme="marine"] .theme-card.active{
  border-color:#D9BC78;
  box-shadow:0 0 20px rgba(198,162,74,.18), inset 0 0 0 1px rgba(217,188,120,.12);
}
html[data-fw-theme="marine"] .avatar-preview{
  background:radial-gradient(circle at 50% 34%,rgba(161,23,41,.28),#130809 72%);
  color:#F2DEB0;
}
html[data-fw-theme="marine"] .field input,
html[data-fw-theme="marine"] .field select,
html[data-fw-theme="marine"] .field textarea{
  background:linear-gradient(180deg,#18070A,#080304);
}
html[data-fw-theme="marine"] .checkin-hero p{
  color:#D4B785;
}

html[data-fw-theme="patriotic"] body{
  background:
    radial-gradient(circle at 8% 8%,rgba(197,29,52,.30),transparent 28%),
    radial-gradient(circle at 92% 5%,rgba(36,93,204,.36),transparent 32%),
    radial-gradient(circle at 52% 38%,rgba(247,249,252,.045),transparent 22%),
    linear-gradient(180deg,#020611,#071B3A 54%,#020611);
}
html[data-fw-theme="classicPatriotic"] body{
  background:
    radial-gradient(circle at 10% 5%,rgba(181,31,53,.22),transparent 29%),
    radial-gradient(circle at 90% 4%,rgba(35,78,138,.30),transparent 32%),
    linear-gradient(180deg,#0C2343,#040811 66%);
}
html[data-fw-theme="broadcastPatriotic"] body{
  background:
    radial-gradient(circle at 15% 0%,rgba(227,38,54,.28),transparent 30%),
    radial-gradient(circle at 82% 5%,rgba(22,139,255,.38),transparent 34%),
    linear-gradient(180deg,#02050C,#092654 50%,#030711);
}
html[data-fw-theme="premiumRwb"] body{
  background:
    radial-gradient(circle at 18% 4%,rgba(255,41,74,.24),transparent 28%),
    radial-gradient(circle at 84% 3%,rgba(65,105,255,.38),transparent 34%),
    radial-gradient(circle at 50% 28%,rgba(245,250,255,.06),transparent 20%),
    linear-gradient(180deg,#01030A,#101B46 56%,#02040D);
}
html[data-fw-theme="goldMidnight"] body{
  background:
    radial-gradient(circle at 50% -8%,rgba(244,207,103,.16),transparent 32%),
    radial-gradient(circle at 18% 18%,rgba(166,124,25,.12),transparent 25%),
    linear-gradient(180deg,#0B1725,#030508 64%,#020304);
}
html[data-fw-theme="oklahoma"] body{
  background:
    radial-gradient(circle at 24% 2%,rgba(232,117,35,.32),transparent 30%),
    radial-gradient(circle at 78% 10%,rgba(120,62,114,.18),transparent 28%),
    linear-gradient(180deg,#3A160C,#0D0808 62%,#080506);
}
html[data-fw-theme="neon"] body{
  background:
    radial-gradient(circle at 18% 5%,rgba(124,58,237,.34),transparent 28%),
    radial-gradient(circle at 82% 7%,rgba(34,211,238,.25),transparent 30%),
    radial-gradient(circle at 52% 32%,rgba(244,114,182,.12),transparent 24%),
    linear-gradient(180deg,#0E0825,#01030B 68%);
}
html[data-fw-theme="worldUnity"] body{
  background:
    radial-gradient(circle at 18% 0%,rgba(20,126,145,.28),transparent 30%),
    radial-gradient(circle at 84% 8%,rgba(46,113,209,.22),transparent 30%),
    linear-gradient(180deg,#0A3344,#031015 66%);
}
html[data-fw-theme="route405"] body{
  background:
    radial-gradient(circle at 18% 0%,rgba(166,47,50,.20),transparent 28%),
    radial-gradient(circle at 82% 3%,rgba(52,90,134,.26),transparent 31%),
    linear-gradient(180deg,#172436,#080A0E 66%);
}
@media(max-width:640px){
  .identity-grid{grid-template-columns:1fr}
  .theme-card{min-height:112px}
}
/* CK405 FRIENDS PUBLIC IDENTITY PICKER + THEME PACK V1 END */


/* CK405 FRIENDS MARINE SCARLET + GOLD ART DIRECTION V1 FIX1 START */
/* Keep the two identity controls visually level even when the left label wraps. */
.identity-grid{
  align-items:end;
}
.identity-grid .field{
  display:grid;
  grid-template-rows:44px 58px;
  gap:7px;
  align-content:end;
}
.identity-grid .field > label{
  min-height:44px;
  display:flex;
  align-items:flex-end;
  line-height:1.15;
  margin:0;
}
.identity-grid .field > input,
.identity-grid .field > select{
  height:58px;
  min-height:58px;
  margin:0;
}

/* Chrome/Windows can otherwise open a white native option list while inheriting
   the theme's pale-gold text. Force a dark, high-contrast option surface. */
.field select{
  color-scheme:dark;
}
.field select option{
  background:#0C0608 !important;
  color:#FFF4E2 !important;
}
.field select option:checked{
  background:#5C101B !important;
  color:#FFFFFF !important;
}
html[data-fw-theme="marine"] .field select{
  background:linear-gradient(180deg,#18070A,#080304);
  color:#FFF4E2;
  border-color:#8C642B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 0 0 1px rgba(198,162,74,.08);
}
html[data-fw-theme="marine"] .identity-grid .field > input{
  border-color:#7A4E1F;
}
@media(max-width:640px){
  .identity-grid .field{
    grid-template-rows:auto 56px;
  }
  .identity-grid .field > label{
    min-height:0;
  }
  .identity-grid .field > input,
  .identity-grid .field > select{
    height:56px;
    min-height:56px;
  }
}
/* CK405 FRIENDS MARINE SCARLET + GOLD ART DIRECTION V1 FIX1 END */


/* CK405 FRIENDS MARINE TRUE METALLIC GOLD V2 START */
:root{
  --fw-gold-shadow:#5B3A07;
  --fw-gold-deep:#7B560D;
  --fw-gold-mid:#B88B24;
  --fw-gold:#D6B04A;
  --fw-gold-bright:#EAD178;
  --fw-gold-spec:#FFF2B8;
  --fw-ivory:#FFF8EB;
}

/* Scarlet remains the dominant mass color. Gold is reflective trim and typography. */
html[data-fw-theme="marine"] body{
  background:
    radial-gradient(circle at 12% -5%,rgba(163,18,40,.48),transparent 32%),
    radial-gradient(circle at 86% 1%,rgba(214,176,74,.11),transparent 27%),
    radial-gradient(circle at 50% 30%,rgba(240,58,81,.07),transparent 25%),
    linear-gradient(180deg,#310812 0%,#0B0205 43%,#030102 100%);
}

/* A real-metal border illusion: bronze shadows + bright specular bands. */
html[data-fw-theme="marine"] .panel{
  position:relative;
  overflow:hidden;
  border:1px solid transparent;
  background:
    linear-gradient(145deg,#20080D,#0B0507 58%,#040102) padding-box,
    linear-gradient(118deg,
      #563706 0%,
      #9B6F14 11%,
      #E2BF5B 20%,
      #FFF0B2 27%,
      #8A600E 38%,
      #C99B30 52%,
      #6A4408 65%,
      #E4C766 78%,
      #FFF2B8 84%,
      #6B4609 100%) border-box;
  box-shadow:
    0 16px 38px rgba(0,0,0,.38),
    0 0 22px rgba(163,18,40,.14),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Restrained sparkle/reflection points on the premium gold-framed panels. */
html[data-fw-theme="marine"] .panel.gold::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 5% 9%,rgba(255,246,202,.95) 0 1px,transparent 2px),
    radial-gradient(circle at 94% 13%,rgba(255,236,163,.86) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 91%,rgba(255,246,198,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 13% 84%,rgba(229,193,95,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 67% 4%,rgba(255,251,220,.68) 0 1px,transparent 2px);
  opacity:.33;
  animation:fwMetalTwinkle 4.8s ease-in-out infinite;
}
html[data-fw-theme="marine"] .panel > *{position:relative;z-index:1}
@keyframes fwMetalTwinkle{
  0%,100%{opacity:.22;filter:brightness(.94)}
  45%{opacity:.50;filter:brightness(1.18)}
  58%{opacity:.28;filter:brightness(1)}
}

/* A traveling highlight across headers gives the trim a polished-metal reflection. */
html[data-fw-theme="marine"] .panel-head{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(163,18,40,.30),rgba(62,8,16,.46) 58%,rgba(214,176,74,.07));
  border-bottom-color:rgba(163,18,40,.52);
}
html[data-fw-theme="marine"] .panel-head::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:-32%;
  width:20%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,242,184,.17),transparent);
  transform:skewX(-20deg);
  animation:fwGoldSweep 7.2s ease-in-out infinite;
}
@keyframes fwGoldSweep{
  0%,66%{left:-32%;opacity:0}
  71%{opacity:.95}
  90%{left:115%;opacity:.25}
  100%{left:115%;opacity:0}
}

/* Brighter readable gold, with material depth rather than yellow fill. */
html[data-fw-theme="marine"] .field label,
html[data-fw-theme="marine"] .panel-head > span:last-child,
html[data-fw-theme="marine"] .clock-chip,
html[data-fw-theme="marine"] .brand-kicker,
html[data-fw-theme="marine"] .gold-text{
  color:#E8CB72 !important;
  text-shadow:
    0 1px 0 #3E2600,
    0 0 7px rgba(229,197,103,.14);
}

/* Major gold title surfaces get a full metallic gradient. */
html[data-fw-theme="marine"] .checkin-hero h1,
html[data-fw-theme="marine"] .brand-title span,
html[data-fw-theme="marine"] .confirm-box h2{
  color:#E7C96C;
  background-image:linear-gradient(180deg,
    #FFF5C3 0%,
    #EBCF79 18%,
    #A77513 39%,
    #F4DD8B 55%,
    #83590B 76%,
    #DDBB56 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 1px 0 #2B1800) drop-shadow(0 0 5px rgba(226,191,88,.13));
}

/* The form copy stays ivory so the page does not become a wall of yellow. */
html[data-fw-theme="marine"] .notice,
html[data-fw-theme="marine"] .still-game{
  color:#FFF4E2;
}
html[data-fw-theme="marine"] .muted,
html[data-fw-theme="marine"] .tiny.muted{
  color:#D1BD8E !important;
}

/* Metallic map frame and scarlet geography. */
html[data-fw-theme="marine"] .world-map{
  border:1px solid transparent;
  background:
    radial-gradient(circle at 50% 55%,#100508 0%,#050407 38%,#010306 82%) padding-box,
    linear-gradient(123deg,#5A3907,#B88820 14%,#F2D986 25%,#81580C 40%,#D2A942 58%,#684208 75%,#F0DA8C 87%,#654108) border-box;
  box-shadow:
    0 0 22px rgba(163,18,40,.15),
    inset 0 0 26px rgba(163,18,40,.07);
}
html[data-fw-theme="marine"] .world-svg path{
  fill:#5A0C18;
  stroke:#D0A43B;
  stroke-width:.82;
  vector-effect:non-scaling-stroke;
}
html[data-fw-theme="marine"] .world-svg{
  filter:
    drop-shadow(0 0 2px rgba(255,234,161,.24))
    drop-shadow(0 0 6px rgba(163,18,40,.10));
}
html[data-fw-theme="marine"] .map-glow{
  background:
    radial-gradient(circle at 25% 30%,rgba(234,207,120,.10),transparent 25%),
    radial-gradient(circle at 70% 50%,rgba(163,18,40,.18),transparent 30%);
}

/* Polished metallic ring around avatars and pins. */
html[data-fw-theme="marine"] .avatar-preview{
  border:3px solid transparent;
  background:
    radial-gradient(circle at 48% 36%,#1A070B,#090305 72%) padding-box,
    linear-gradient(135deg,#5B3907,#C99B31 20%,#FFF0B1 35%,#855A0B 52%,#E1C56E 70%,#644007) border-box;
  color:#F1D57E;
  box-shadow:0 0 18px rgba(163,18,40,.20),inset 0 0 18px rgba(163,18,40,.07);
}
html[data-fw-theme="marine"] .world-pin{
  border-color:#E0C46E;
  box-shadow:
    0 0 0 1px #6A4308,
    0 0 14px var(--pin),
    0 0 26px rgba(163,18,40,.40);
}
html[data-fw-theme="marine"] .world-pin.newest:before{
  border-color:#E8CB72;
}

/* Inputs remain dark and readable. */
html[data-fw-theme="marine"] .field input,
html[data-fw-theme="marine"] .field select,
html[data-fw-theme="marine"] .field textarea{
  background:linear-gradient(180deg,#19070A,#080304);
  color:#FFF8EB;
  border-color:#8C6516;
}
html[data-fw-theme="marine"] .field select{
  color-scheme:dark;
}
html[data-fw-theme="marine"] .field select option{
  background:#0B0507 !important;
  color:#FFF8EB !important;
}
html[data-fw-theme="marine"] .field select option:checked{
  background:#6B1020 !important;
  color:#FFFFFF !important;
}

/* HARD ALIGNMENT FIX:
   turn the nested field wrappers into grid contents and explicitly place both labels
   on the same row and both controls on the same row. */
.identity-grid{
  display:grid !important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
  grid-template-rows:52px 58px !important;
  column-gap:22px !important;
  row-gap:8px !important;
  align-items:stretch !important;
}
.identity-grid > .field{
  display:contents !important;
}
.identity-grid > .field:nth-child(1) > label{
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:end !important;
  min-height:0 !important;
  margin:0 !important;
  line-height:1.15 !important;
}
.identity-grid > .field:nth-child(1) > select{
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 !important;
}
.identity-grid > .field:nth-child(2) > label{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:end !important;
  min-height:0 !important;
  margin:0 !important;
  line-height:1.15 !important;
}
.identity-grid > .field:nth-child(2) > input{
  grid-column:2 !important;
  grid-row:2 !important;
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 !important;
}

@media(max-width:640px){
  .identity-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 56px auto 56px !important;
    row-gap:7px !important;
  }
  .identity-grid > .field:nth-child(1) > label{grid-column:1 !important;grid-row:1 !important}
  .identity-grid > .field:nth-child(1) > select{grid-column:1 !important;grid-row:2 !important;height:56px !important;min-height:56px !important}
  .identity-grid > .field:nth-child(2) > label{grid-column:1 !important;grid-row:3 !important;margin-top:7px !important}
  .identity-grid > .field:nth-child(2) > input{grid-column:1 !important;grid-row:4 !important;height:56px !important;min-height:56px !important}
}
/* CK405 FRIENDS MARINE TRUE METALLIC GOLD V2 END */

/* CK405 FRIENDS HISTORICAL FIRSTS + LATEST BEACON V1 START */
.live-page .world-pin{overflow:visible}
.live-page .world-pin.ck405-latest-friend{
  border-color:#c8fbff;
  box-shadow:0 0 9px #fff,0 0 20px #34e9ff,0 0 36px rgba(0,224,255,.72);
  z-index:8;
}
.live-page .world-pin.ck405-latest-friend:before{
  content:"";
  position:absolute;
  inset:-13px;
  border:2px solid #76f5ff;
  border-radius:50%;
  box-shadow:0 0 10px rgba(87,239,255,.9);
  animation:ck405LatestFriendPulse 1.15s ease-out infinite;
}
.live-page .world-pin.ck405-latest-friend:after{
  content:"";
  position:absolute;
  inset:-23px;
  border:2px solid rgba(255,255,255,.78);
  border-radius:50%;
  animation:ck405LatestFriendPulse 1.15s .42s ease-out infinite;
}
@keyframes ck405LatestFriendPulse{
  0%{transform:scale(.55);opacity:1}
  100%{transform:scale(1.55);opacity:0}
}
.live-page .ck405-latest-marker{
  position:absolute;
  left:50%;
  top:46px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  pointer-events:none;
  white-space:nowrap;
  z-index:20;
}
.live-page .ck405-latest-marker b{
  color:#eaffff;
  font:1000 12px/1 system-ui,Segoe UI,Arial,sans-serif;
  letter-spacing:.04em;
  text-shadow:0 0 5px #00eaff,0 0 11px #00eaff,2px 2px 4px #000;
  animation:ck405LatestFriendName .82s ease-in-out infinite alternate;
}
.live-page .ck405-latest-marker em{
  font:900 8px/1 system-ui,Segoe UI,Arial,sans-serif;
  font-style:normal;
  letter-spacing:.08em;
  color:#9df9ff;
  background:rgba(0,18,31,.94);
  border:1px solid #56efff;
  border-radius:4px;
  padding:3px 5px;
  box-shadow:0 0 8px rgba(0,234,255,.45);
}
@keyframes ck405LatestFriendName{
  from{opacity:.72;filter:brightness(.86)}
  to{opacity:1;filter:brightness(1.45)}
}

.live-page .world-pin.ck405-founder-friend{
  border-color:#ffe27a;
  box-shadow:0 0 10px #d6ad32,0 0 23px rgba(255,196,56,.5);
  z-index:7;
}
.live-page .ck405-founder-marker{
  position:absolute;
  left:50%;
  bottom:47px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  pointer-events:none;
  white-space:nowrap;
  z-index:19;
}
.live-page .ck405-founder-marker b{
  color:#ffe681;
  font:1000 13px/1 system-ui,Segoe UI,Arial,sans-serif;
  letter-spacing:.045em;
  text-shadow:0 0 4px #ffcf3a,0 0 10px #d99b00,0 0 18px rgba(255,187,32,.82),2px 2px 4px #000;
  animation:ck405FounderGoldBlink 1.18s ease-in-out infinite alternate;
}
.live-page .ck405-founder-marker em{
  display:block;
  font:900 8px/1.05 system-ui,Segoe UI,Arial,sans-serif;
  font-style:normal;
  letter-spacing:.055em;
  color:#ffec9e;
  background:linear-gradient(180deg,rgba(70,45,2,.97),rgba(20,12,0,.97));
  border:1px solid #edc34f;
  border-radius:4px;
  padding:3px 5px;
  box-shadow:0 0 7px rgba(255,195,49,.38);
}
@keyframes ck405FounderGoldBlink{
  from{opacity:.68;filter:brightness(.78)}
  to{opacity:1;filter:brightness(1.52)}
}

/* If the latest friend is also a historical first, both remain visible:
   gold founder stack above, cyan latest label below. */
.live-page .world-pin.ck405-latest-friend.ck405-founder-friend{
  border-color:#fff1a6;
  box-shadow:0 0 8px #fff,0 0 18px #e9c24a,0 0 28px rgba(0,234,255,.48);
}
/* CK405 FRIENDS HISTORICAL FIRSTS + LATEST BEACON V1 END */