:root{
  --gold:#ffd24a; --cyan:#5fe6ff; --panel:rgba(12,16,34,.74);
  --stroke:rgba(120,160,255,.22);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:#000;
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Hiragino Sans','Yu Gothic','Meiryo','Microsoft YaHei','PingFang SC','Noto Sans SC','Nirmala UI','Noto Sans Devanagari','Mangal','Segoe UI','Noto Sans','Noto Sans Symbols 2','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',system-ui,sans-serif;color:#eaf0ff;
  /* 모바일: 당겨서 새로고침·고무줄 스크롤·글자 자동확대 방지 */
  overscroll-behavior:none;-webkit-text-size-adjust:100%;touch-action:manipulation;}
/* 우주 배경 = 완전한 블랙 (별은 캔버스에서 3단 시차로 그림) */
canvas#game{display:block;position:fixed;inset:0;cursor:crosshair;background:#000;
  touch-action:none;                 /* 터치 드래그를 조종에 쓰므로 기본 제스처 차단 */
  -webkit-touch-callout:none;        /* 길게 누르면 뜨는 메뉴 방지 */
  -webkit-user-select:none;user-select:none;}
/* HUD·버튼은 드래그해도 글자가 선택되지 않도록 (모바일에서 파란 선택영역이 뜨는 문제) */
#hud,#hud *,.overlay button,.panel button,.navLinks,.siteNav{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
/* 입력창·본문 글은 선택 가능해야 하므로 되돌림 */
input,textarea,.pageSec,.pageSec *,.doc,.doc *{-webkit-user-select:text;user-select:text;}
.hidden{display:none !important;}

/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:20;background:radial-gradient(120% 100% at 50% 20%,rgba(16,20,48,.6),rgba(0,0,0,.9));
  backdrop-filter:blur(3px);}
.panel{width:min(92vw,440px);padding:32px 30px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,rgba(20,26,58,.94),rgba(6,8,22,.96));
  border:1px solid var(--stroke);box-shadow:0 24px 80px rgba(0,0,0,.7),inset 0 0 40px rgba(70,120,255,.06);}
.panel h1{margin:0 0 2px;font-size:38px;letter-spacing:2px;font-weight:800;line-height:1;
  background:linear-gradient(90deg,#fff,#bcd2ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.panel h1 span{display:block;font-size:38px;background:linear-gradient(90deg,var(--gold),#ff9d3d);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.panel h2{margin:0 0 10px;font-size:26px;}
.tag{margin:6px 0 20px;color:#9fb2e6;font-size:13px;letter-spacing:1px;}
#nameInput{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--stroke);
  background:rgba(0,0,0,.4);color:#fff;font-size:16px;text-align:center;outline:none;}
#nameInput:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(95,230,255,.15);}
button{margin-top:12px;width:100%;padding:14px;border:none;border-radius:12px;cursor:pointer;
  font-size:16px;font-weight:700;color:#06122a;letter-spacing:1px;
  background:linear-gradient(90deg,var(--cyan),#8ad9ff);transition:transform .08s,filter .2s;}
button:hover{filter:brightness(1.08);}
button:active{transform:translateY(1px) scale(.99);}
button:disabled{opacity:.6;cursor:default;filter:grayscale(.3);}
#playBtn{margin-top:16px;}
/* 시작 화면의 관전 버튼. 시작 버튼보다 눈에 덜 띄어야 한다 */
#watchBtn{margin-top:8px;background:rgba(255,255,255,.07);color:#cfe0ff;
  border:1px solid rgba(255,255,255,.18);font-weight:600;}
#watchBtn:hover{background:rgba(255,255,255,.13);}
#respawnBtn{background:linear-gradient(90deg,var(--gold),#ff9d3d);}

/* Google 로그인 버튼 */
.gbtn{background:#fff;color:#222;display:flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;border:1px solid rgba(0,0,0,.1);}
.gbtn .gicon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:conic-gradient(#ea4335,#fbbc05,#34a853,#4285f4,#ea4335);color:#fff;
  font-weight:800;font-size:13px;}
.gbtn.done{background:#e8f7ee;color:#1a7f44;}
/* 구글 공식 로그인 버튼이 렌더링되는 자리 (가운데 정렬) */
.gsiWrap{display:flex;justify-content:center;margin:10px 0 6px;min-height:44px;}
.gsiWrap{width:100%;min-width:220px;}
/* 구글이 버튼을 못 그리면 이 칸은 계속 빈다 → 높이만 접는다.
   폭(width:100%)은 남겨야 구글이 그릴 기회를 잃지 않는다. */
.gsiWrap:empty{min-height:0;margin:0;}

/* 꾸미기 — 로그인하면 로그인 버튼 자리에 표시 */
#dressUp{background:rgba(120,160,255,.08);border:1px solid var(--stroke);border-radius:12px;
  padding:10px 11px;margin:10px 0 6px;}
.duHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;}
.duTitle{font-size:12.5px;font-weight:800;color:#cfe0ff;}
.duBest{font-size:11px;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;}
.dressBtn{width:100%;padding:12px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:800;
  cursor:pointer;color:#0d1226;border:none;
  background:linear-gradient(135deg,#ffd479,#ff9f5a);box-shadow:0 3px 14px rgba(255,180,90,.3);}
.dressBtn:hover{filter:brightness(1.08);}
/* 비로그인 상태의 꾸미기 안내 — 기능이 있다는 걸 미리 보여주고 로그인으로 유도 */
#dressTease{background:rgba(120,160,255,.06);border:1px dashed rgba(140,175,255,.34);
  border-radius:12px;padding:10px 11px;margin:10px 0 6px;}
#dressTease.hidden{display:none;}
.dressBtn.locked{background:linear-gradient(135deg,#8f93a8,#6f7488);color:#151a2c;
  box-shadow:none;opacity:.92;}
.dressBtn.locked::after{content:'🔒';margin-left:7px;}
.teaseHint{margin-top:7px;font-size:11.5px;line-height:1.5;color:#a9bbe8;text-align:center;}
/* 로그인 버튼으로 시선을 보낼 때 잠깐 반짝임 */
@keyframes ctPulse{0%,100%{box-shadow:0 0 0 0 rgba(120,200,255,0);}
  50%{box-shadow:0 0 0 7px rgba(120,200,255,.30);}}
.pulse{animation:ctPulse 0.8s ease-in-out 3;border-radius:24px;}

/* ---------- 꾸미기 팝업 ---------- */
.dressPanel{width:min(460px,94vw);max-height:92vh;max-height:92dvh;overflow-y:auto;text-align:left;}
.dmTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.dmTop h2{margin:0;font-size:19px;}
.dmCredit{font-size:14px;font-weight:800;color:var(--gold);white-space:nowrap;}
.dmTabs{display:flex;gap:6px;margin-bottom:12px;}
.dmTab{flex:1;padding:9px 6px;border-radius:9px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  background:rgba(120,160,255,.10);border:1px solid var(--stroke);color:#9fb2e6;}
.dmTab.on{background:rgba(120,180,255,.26);color:#fff;border-color:rgba(140,190,255,.55);}
.dmBody{margin-bottom:10px;}
.dmUse{width:100%;margin-top:10px;padding:11px;border-radius:10px;font-family:inherit;font-size:13.5px;
  font-weight:800;cursor:pointer;border:none;background:linear-gradient(135deg,#5fe6ff,#4da6ff);color:#07142a;}
.dmUse.alt{background:linear-gradient(135deg,#ffd479,#ff9f5a);}
.dmUse:disabled{filter:grayscale(.7) brightness(.6);cursor:not-allowed;}
.dmBtns{display:flex;gap:8px;}

/* '이 그림으로 사용하기' 뒤에 뜨는 확인창.
   예전에는 스타일이 없어 버튼(.dmUse)의 전체폭 규칙만 먹으면서
   화면을 가로지르는 띠 두 개로 보였다. 꾸미기 창 위에 겹치는 작은 카드로 만든다. */
.playAsk{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(4,6,20,.72);backdrop-filter:blur(4px);}
.playAsk[hidden]{display:none;}
.playAskBox{width:min(92vw,340px);padding:26px 24px 20px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(20,26,58,.97),rgba(6,8,22,.98));
  border:1px solid var(--stroke);box-shadow:0 24px 70px rgba(0,0,0,.7);
  animation:playAskIn .16s ease-out;}
@keyframes playAskIn{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
.playAskIcon{font-size:38px;line-height:1;margin-bottom:8px;}
.playAskBox h3{margin:0 0 6px;font-size:17px;font-weight:800;color:#eaf1ff;}
.playAskBox p{margin:0 0 18px;font-size:12.5px;line-height:1.55;color:#9fb2e6;}
/* 버튼은 세로로 쌓는다 — 가로로 두면 글자가 길어지는 언어에서 줄이 깨진다 */
.playAskBtns{display:flex;flex-direction:column;gap:8px;}
.playAskBtns .dmUse{margin:0;}
.dmBtns .dmUse{margin-top:8px;}
.dmClose{width:100%;margin-top:6px;padding:10px;border-radius:10px;font-family:inherit;font-size:13px;
  cursor:pointer;background:rgba(255,255,255,.07);border:1px solid var(--stroke);color:#c9d4f2;}

/* 저장 칸 3개 */
.slotRow{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px;}
/* 저장 칸 — 저장된 우주선 그림을 실제로 보여준다(글씨만으로는 뭐가 들었는지 알 수 없다) */
.slotCell{position:relative;padding:6px 4px 5px;border-radius:9px;border:1px solid var(--stroke);
  background:rgba(120,160,255,.08);cursor:pointer;text-align:center;font-size:11px;font-weight:700;color:#9fb2e6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;}
.slotCell.on{border-color:#ffd479;background:rgba(255,212,121,.18);color:#fff;
  box-shadow:0 0 0 2px rgba(255,212,121,.3);}
.slotCell.locked{color:#7f90b5;background:rgba(0,0,0,.28);}
.slotCell .slotNo{position:absolute;top:3px;left:6px;font-size:9.5px;opacity:.75;}
.slotCell .slotSub{font-size:9.5px;font-weight:600;opacity:.8;}
.slotCell .slotLock{font-size:15px;line-height:1;}
/* 그림 미리보기: 인게임과 같은 가로 비율, 도트 그대로 */
.slotImg{width:100%;max-width:78px;aspect-ratio:293/180;object-fit:fill;image-rendering:pixelated;
  border-radius:5px;background:rgba(4,8,22,.5);}
.slotEmpty{width:100%;max-width:78px;aspect-ratio:293/180;border-radius:5px;
  border:1px dashed rgba(140,170,220,.34);
  background:repeating-conic-gradient(rgba(255,255,255,.05) 0 25%,transparent 0 50%) 0 0/10px 10px;}

/* 그리기판 */
.drawArea{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:10px;}
/* 그림판은 인게임 비율(가로로 넓은 삼각형 기체)과 똑같은 비율로 보여준다 → 그린 그대로 나온다 */
#drawWrap{position:relative;width:min(330px,80vw);aspect-ratio:293/180;}
#drawCv,#drawGuide{position:absolute;inset:0;width:100%;height:100%;border-radius:10px;}
#drawCv{image-rendering:pixelated;
  border:1px solid var(--stroke);background:
    repeating-conic-gradient(rgba(255,255,255,.07) 0 25%,transparent 0 50%) 0 0/16px 16px,#0b1024;
  touch-action:none;cursor:crosshair;}
#drawGuide{pointer-events:none;}
.shipHintTxt{font-size:10px;color:#7f90b5;}
.toolRow{display:flex;gap:6px;margin-bottom:8px;}
.toolBtn{flex:1;padding:8px 4px;border-radius:8px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  background:rgba(120,160,255,.10);border:1px solid var(--stroke);color:#9fb2e6;}
.toolBtn.on{background:rgba(120,180,255,.28);color:#fff;border-color:rgba(140,190,255,.55);}
.toolBtn.danger{background:rgba(255,90,90,.14);color:#ffc9c9;border-color:rgba(255,120,120,.34);}
.brushRow{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#9fb2e6;margin-bottom:10px;}
.brushRow .vol{flex:1;}

/* ---------- 게임 요령 — 좌우로 넘기는 큰 그림 ---------- */
/* 그림은 게임 렌더러가 그대로 그린다(guide.js → render.js renderScene) */
.guideDeck{text-align:center;margin:4px 0 2px;}
.gdStage{display:flex;align-items:center;justify-content:center;gap:6px;}
.gdStage canvas{border-radius:12px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 26px rgba(0,0,0,.55);display:block;max-width:100%;
  touch-action:pan-y;}          /* 세로 스크롤은 살리고 좌우만 넘기기로 */
.gdArrow{flex:0 0 auto;width:30px;height:46px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#cfe0ff;font-size:20px;line-height:1;font-family:inherit;
  transition:background .12s,transform .12s;}
.gdArrow:hover{background:rgba(255,255,255,.13);transform:translateY(-1px);}
.gdTitle{margin:12px 0 4px;font-size:15.5px;font-weight:800;color:#eaf1ff;}
.gdText{margin:0 auto;max-width:340px;font-size:12.5px;line-height:1.55;color:#9fb2e6;min-height:38px;}
.gdText b{color:#ffd479;}
.gdBar{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:10px;}
.gdDots{display:flex;gap:6px;}
.gdDots i{width:7px;height:7px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.22);transition:background .15s,transform .15s;}
.gdDots i.on{background:#ffd479;transform:scale(1.3);}
.gdNum{font-size:11px;color:#6f83b8;font-variant-numeric:tabular-nums;}
@media (max-width:520px){
  /* 좁은 화면에서는 화살표가 그림을 잡아먹는다 — 점과 밀어넘기기로 충분하다 */
  .gdArrow{display:none;}
  .gdTitle{font-size:14.5px;}
  .gdText{font-size:12px;}
}

/* 팔레트 */
.palGrid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-bottom:8px;}
.palCell{position:relative;aspect-ratio:1;border-radius:7px;border:2px solid rgba(255,255,255,.16);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:9px;}
.palCell.sel{border-color:#ffd479;box-shadow:0 0 0 2px rgba(255,212,121,.36);}
.palCell.erase{background:repeating-conic-gradient(rgba(255,255,255,.16) 0 25%,transparent 0 50%) 0 0/8px 8px;}
.palCell.locked{cursor:pointer;}
.palCell.locked::after{content:'🔒';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);border-radius:5px;font-size:10px;}

.skinGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.skinCell{position:relative;aspect-ratio:1;border-radius:10px;border:2px solid rgba(255,255,255,.14);
  cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;
  font-size:9px;font-weight:700;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.8);
  transition:transform .12s,border-color .12s;overflow:hidden;}
.skinCell:hover{transform:translateY(-2px);}
.skinCell.sel{border-color:#ffd479;box-shadow:0 0 0 2px rgba(255,212,121,.32);}
.skinCell.locked{cursor:not-allowed;filter:grayscale(.85) brightness(.5);}
.skinCell.locked:hover{transform:none;}
.skinCell .lockNeed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;background:rgba(0,0,0,.42);color:#ffd479;font-weight:800;}
.skinCell.aura1{box-shadow:0 0 10px 1px rgba(255,190,90,.5);}
.skinCell.aura2{box-shadow:0 0 14px 2px rgba(255,215,110,.75);}
.duHint{font-size:10.5px;color:#8fa2c8;margin-top:8px;text-align:center;}
.linkBtn{background:none;border:none;color:#7f90b5;font-size:11px;cursor:pointer;
  text-decoration:underline;padding:6px 0 0;width:100%;font-family:inherit;}
.linkBtn:hover{color:#c9d4f2;}

/* 설정창 — 게임 중 조작 버튼 */
#gameActions{display:flex;gap:8px;margin:12px 0 4px;}
.actBtn{flex:1;padding:11px 8px;border-radius:10px;border:1px solid var(--stroke);
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.actBtn.restart{background:rgba(90,160,255,.18);color:#cfe0ff;border-color:rgba(120,180,255,.42);}
.actBtn.restart:hover{background:rgba(90,160,255,.30);}
.actBtn.quit{background:rgba(255,90,90,.14);color:#ffc9c9;border-color:rgba(255,120,120,.38);}
.actBtn.quit:hover{background:rgba(255,90,90,.26);}
.gbtn .gopt{color:#888;font-weight:500;font-size:12px;}
#authState,#authState2{margin-top:8px;font-size:11.5px;color:#8fa2d6;}

.rules{margin-top:18px;text-align:left;font-size:12.5px;line-height:1.9;color:#c3d0f5;
  border-top:1px solid var(--stroke);padding-top:14px;}
.rules b{color:var(--gold);}
#connState{margin-top:14px;font-size:12px;color:#8fa2d6;}
/* 연결이 정상일 때는 자리째 비운다 — 문제가 있을 때만 보이면 된다 */
#connState.quiet{display:none;}
.startDesc{margin-top:14px;font-size:12px;line-height:1.65;color:#aab9e2;}
/* 시작화면 배경 반투명 → 뒤 우주(별) 살짝 비치게 */
#start{background:radial-gradient(120% 100% at 50% 20%,rgba(16,20,48,.32),rgba(4,6,20,.7));backdrop-filter:blur(1.5px);}
#deadBy{font-size:15px;color:#ffb0b0;margin-bottom:4px;}
#deadScore{font-size:13px;color:#b9c6ee;margin-bottom:6px;}

/* 사망 화면 로그인 영역 */
#deadLogin{margin:14px 0 4px;padding:14px;border-radius:14px;
  background:rgba(95,230,255,.06);border:1px solid var(--stroke);}
#deadLogin .dlTitle{font-size:12.5px;color:#cfe0ff;margin-bottom:6px;}

/* 광고 인터스티셜 */
.adpanel{width:min(94vw,560px);padding:22px;}
.adTop{font-size:11px;color:#8fa2d6;letter-spacing:3px;text-align:right;margin-bottom:8px;}
#adContinue{margin-top:16px;background:linear-gradient(90deg,var(--gold),#ff9d3d);}

/* ---------- HUD ---------- */
/* HUD 전체는 터치를 통과시켜(조종에 방해되지 않도록) 두고,
   실제로 눌러야 하는 요소만 아래에서 다시 켠다.
   ※ 이걸 빠뜨리면 버튼을 눌러도 터치가 캔버스로 새어나가 우주선이 움직인다. */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;}
#hud button,#hud input,#hud select,#hud a,
#boostBtn,#chatWrap,#chatForm,#chatInput,#chatToggle,#rankPanel{pointer-events:auto;}
/* 채팅 기록은 읽기만 하는 영역이라 터치를 통과시킨다(조종 방해 방지) */
#chatLog{pointer-events:none;}

/* 좌상단: 원형 미니맵(레이더) */
#mapWrap{position:absolute;top:16px;left:16px;text-align:center;}
#mapWrap .mapTitle{font-size:10px;letter-spacing:3px;color:#9fb2e6;margin:0 0 5px;}
#minimap{display:block;width:168px;height:168px;border-radius:50%;
  background:rgba(4,5,12,.6);box-shadow:0 6px 24px rgba(0,0,0,.5);}

/* 우상단: 랭킹 */
#rankPanel{position:absolute;top:16px;right:16px;width:186px;background:rgba(10,14,32,.46);
  border:1px solid var(--stroke);border-radius:16px;padding:12px 14px;backdrop-filter:blur(6px);}
/* 명예의 전당(1달·1일 랭킹 TOP3) — 각각 별도 박스, 실시간 랭킹 위에 고정 */
/* 명예의 전당 — 가로 배치(위: 오늘 TOP3, 아래: 월드레코드 1위) */
#hallWrap{display:flex;flex-direction:column;gap:5px;margin-bottom:9px;}
.hallRow{display:flex;align-items:center;gap:7px;background:rgba(120,160,255,.10);
  border:1px solid var(--stroke);border-radius:10px;padding:5px 8px;}
.hallRow.wr{background:linear-gradient(90deg,rgba(255,196,80,.16),rgba(255,150,60,.07));
  border-color:rgba(255,196,80,.42);}
.hallRowTitle{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.2px;color:#ffd479;white-space:nowrap;}
.hallRow.wr .hallRowTitle{color:#ffca63;}
.hallRowList{flex:1;min-width:0;list-style:none;margin:0;padding:0;display:flex;gap:9px;font-size:10.5px;overflow:hidden;}
.hallRowList li{display:flex;align-items:center;gap:3px;min-width:0;color:#c9d4f2;white-space:nowrap;}
.hallRowList li .hmn{overflow:hidden;text-overflow:ellipsis;max-width:74px;}
.hallRowList li .htr{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;}
.hallRowList li.me{color:#fff;font-weight:800;}
.hallRowList li.me .hmn::before{content:'▸';color:var(--cyan);margin-right:2px;}
.hallRowList li.hempty{opacity:.4;}
/* 가상 커서 — 마우스를 가둬 둔 동안에만 보인다 */
#aimDot{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;
  pointer-events:none;z-index:14;border-radius:50%;
  border:1.5px solid rgba(126,224,255,.9);box-shadow:0 0 8px rgba(126,224,255,.55);}
#aimDot::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px 0 0 -1px;
  border-radius:50%;background:#7ee0ff;}

/* 월드레코드 줄에 그 기록을 세울 때 탔던 우주선을 작게 그린다 */
/* ※ #hallRecord 로 한정할 것. 그냥 .hallRow.wr 로 잡았더니 같은 클래스를 쓰는
   메인 페이지의 월드레코드 카드까지 덮어써서 우주선이 64px → 26px 로 쪼그라들었다. */
#hallRecord li .wrShip{flex:0 0 auto;width:26px;display:inline-flex;
  align-items:center;justify-content:center;margin-right:3px;}
#hallRecord li .wrShip canvas{width:26px;height:auto;display:block;}
.hallRow.wr .hallRowList li .hmn{max-width:110px;font-weight:700;color:#ffe9bd;}
.hallRow.wr .hallRowList li .htr{color:#ffd479;font-size:12px;}
/* 오늘 랭킹 — 한 칸 안에 1·2·3등을 각각 한 줄씩 */
.hallBox{background:rgba(120,160,255,.10);border:1px solid var(--stroke);border-radius:10px;padding:6px 8px;}
.hallBoxTitle{font-size:10px;font-weight:800;color:#ffd479;margin-bottom:4px;}
.hallColList{list-style:none;margin:0;padding:0;font-size:10.5px;}
.hallColList li{display:flex;justify-content:space-between;gap:6px;padding:2px 0;color:#c9d4f2;}
.hallColList li .hmn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hallColList li .htr{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto;}
.hallColList li.me{color:#fff;font-weight:800;}
.hallColList li.me .hmn::before{content:'▸';color:var(--cyan);margin-right:2px;}
.hallColList li.hempty{opacity:.4;justify-content:center;}
.rankHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
#rankTitle{font-size:13px;font-weight:700;color:#fff;}
#rankToggle{pointer-events:auto;width:auto;margin:0;padding:4px 9px;font-size:10px;border-radius:8px;
  color:#cfe0ff;background:rgba(120,160,255,.16);font-weight:600;letter-spacing:0;}
#rankList{list-style:none;margin:0;padding:0;font-size:12.5px;}
#rankList li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:#d5def7;}
#rankList li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#rankList li .tr{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;}
#rankList li.me{color:#fff;font-weight:700;}
#rankList li.me .nm::before{content:'▸ ';color:var(--cyan);}
#rankList li .bot{opacity:.55;font-size:10px;margin-left:4px;}
#resetInfo{margin-top:9px;padding-top:8px;border-top:1px solid var(--stroke);
  font-size:10.5px;color:#8fa2d6;text-align:center;letter-spacing:.3px;}

/* ---------- 순위 배지 · 국기 ---------- */
/* 순위 숫자. 1·2·3등만 금·은·동으로 확실히 구분된다. */
/* 부모가 모두 flex + gap 이므로 여백은 gap 에 맡긴다(margin 을 주면 두 번 벌어진다) */
.rk{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  font-size:10px;font-weight:800;font-style:normal;line-height:1;letter-spacing:0;
  color:#9fb2e6;background:rgba(120,160,255,.14);border:1px solid var(--stroke);}
.rk1{color:#3a2a05;background:linear-gradient(160deg,#ffe58c,#efa625);
  border-color:#ffd664;box-shadow:0 0 10px rgba(255,200,70,.55);}
.rk2{color:#212838;background:linear-gradient(160deg,#f4f8ff,#b4c4e6);border-color:#dde7ff;}
.rk3{color:#3a1f0e;background:linear-gradient(160deg,#f6b587,#c56d33);border-color:#f0a670;}
/* 국기 — 이모지가 아니라 SVG로 직접 그린다(윈도우에는 국기 글꼴이 없다).
   목록에 없는 나라는 .flgTxt 로 국가코드 배지가 온다. */
.flg{flex:0 0 auto;display:inline-block;width:20px;height:13.4px;border-radius:2px;
  overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.5);}
.flg svg{display:block;width:100%;height:100%;}
.flg.flgTxt{width:auto;height:auto;font-size:8.5px;font-weight:800;letter-spacing:.4px;
  color:#bcd0ff;background:rgba(120,160,255,.18);border:1px solid var(--stroke);
  border-radius:3px;padding:2px 4px;box-shadow:none;line-height:1;}
/* 시상대 국기는 크게 — 한눈에 보이도록 */
.podFlag{width:46px;height:30.7px;border-radius:4px;margin-bottom:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 3px 10px rgba(0,0,0,.55);}
.pod.first .podFlag{width:58px;height:38.7px;}
.podFlag.flgTxt{width:auto;height:auto;font-size:13px;padding:4px 8px;}
/* 한 줄 안에서 이름만 늘어나고 국기·점수는 오른쪽에 붙어 있게 한다 */
#rankList li .nm,.hallColList li .hmn{flex:1 1 auto;min-width:0;}

/* ---------- 시상대 (메인 페이지 랭킹) ---------- */
/* 시상대(왼쪽) + 4등 아래 순위표(오른쪽) 2단 배치 */
.rankSplit{display:flex;gap:14px;align-items:stretch;margin:14px 0 10px;}
.rankSide{background:rgba(120,160,255,.07);border:1px solid var(--stroke);
  border-radius:12px;padding:10px 12px;min-width:0;}
.rankSide .hallBoxTitle{margin-bottom:6px;}
.podSide{flex:1 1 46%;display:flex;flex-direction:column;}
.listSide{flex:1 1 54%;}
.listSide .hallColList{font-size:12.5px;}
.listSide .hallColList li{padding:5px 0;border-bottom:1px solid rgba(120,160,255,.10);}
.listSide .hallColList li:last-child{border-bottom:none;}
@media (max-width:720px){
  .rankSplit{flex-direction:column;gap:10px;}
}

.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;
  flex:1;margin-top:auto;padding-bottom:10px;}
.pod{flex:1 1 0;min-width:0;max-width:200px;display:flex;flex-direction:column;
  align-items:center;text-align:center;}
.podCrown{font-size:24px;line-height:1;color:#ffd24a;margin-bottom:2px;
  text-shadow:0 0 16px rgba(255,200,70,.9);}
.podName{max-width:100%;display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:13px;font-weight:800;color:#e8efff;}
/* 이름만 줄임표 처리 — 국기는 줄어들지 않게 따로 감싼다 */
.podName .pnm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pod.first .podName{font-size:15px;color:#fff;}
.podScore{font-size:14px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums;margin:1px 0 7px;}
.pod.first .podScore{font-size:18px;text-shadow:0 0 14px rgba(255,210,74,.5);}
.podBlock{width:100%;display:flex;align-items:center;justify-content:center;
  border:1px solid;border-bottom:none;border-radius:12px 12px 0 0;}
.pod.first  .podBlock{height:104px;border-color:rgba(255,210,74,.62);
  background:linear-gradient(180deg,rgba(255,210,74,.34),rgba(255,160,40,.07));
  box-shadow:0 -10px 34px rgba(255,190,60,.26);}
.pod.second .podBlock{height:74px;border-color:rgba(202,218,255,.5);
  background:linear-gradient(180deg,rgba(206,222,255,.26),rgba(150,175,230,.06));}
.pod.third  .podBlock{height:54px;border-color:rgba(232,162,97,.5);
  background:linear-gradient(180deg,rgba(226,150,86,.26),rgba(180,110,60,.06));}
.podRank{font-size:26px;font-weight:800;line-height:1;}
.pod.first  .podRank{font-size:34px;color:#ffd970;text-shadow:0 0 18px rgba(255,200,70,.75);}
.pod.second .podRank{color:#dde7ff;}
.pod.third  .podRank{color:#f3b98f;}
.pod.ghost{opacity:.28;}
.pod.me .podName{color:#5fe6ff;}
.pod.me .podName::before{content:'▸';margin-right:3px;}
.podEmpty{width:100%;text-align:center;opacity:.45;font-size:12px;padding:14px 0;}
@media (max-width:520px){
  .podium{gap:6px;}
  .podName{font-size:11px;}
  .pod.first .podName{font-size:12.5px;}
  .podScore{font-size:12px;}
  .pod.first .podScore{font-size:15px;}
  .pod.first .podBlock{height:80px;}
  .pod.second .podBlock{height:58px;}
  .pod.third .podBlock{height:42px;}
  .podRank{font-size:20px;}
  .pod.first .podRank{font-size:26px;}
}

/* 좌하단: 점수 + 부스터 */
#botleft{position:absolute;left:16px;bottom:16px;display:flex;gap:12px;align-items:flex-end;}
#scoreBox{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;
  padding:8px 18px;text-align:center;min-width:92px;backdrop-filter:blur(6px);}
.scoreNum{font-size:30px;font-weight:800;color:var(--gold);line-height:1;text-shadow:0 0 18px rgba(255,210,74,.4);}
.scoreLabel{font-size:11px;color:#a9b6e0;margin-top:3px;letter-spacing:2px;}
#boostWrap{width:150px;}
#boostBar{height:14px;border-radius:8px;background:rgba(0,0,0,.4);border:1px solid var(--stroke);overflow:hidden;}
#boostFill{height:100%;width:100%;border-radius:8px;
  background:linear-gradient(90deg,#3fd0ff,#8affea);transition:width .08s linear;}
.boostLabel{font-size:10px;color:#93a4d4;margin-top:4px;letter-spacing:2px;text-align:center;}

#hint{position:absolute;bottom:18px;left:0;right:0;margin:auto;text-align:center;
  font-size:12px;color:#8ea0cf;letter-spacing:.5px;pointer-events:none;}

/* ---------- 터치 조작: 왼쪽 아래 조이스틱 + 오른쪽 아래 부스터 ---------- */
.touchOnly{display:none;}                       /* 기본은 숨김 — JS가 터치기기에서만 켬 */
body.touch .touchOnly{display:flex;}

/* 조이스틱을 잡을 수 있는 넓은 영역(보이지 않음). 손가락을 대면 그 자리에 스틱이 생긴다. */
#joyZone{position:absolute;right:0;bottom:0;width:52%;height:46%;z-index:12;
  pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;}
#joyBase{position:absolute;width:118px;height:118px;border-radius:50%;
  left:calc(100% - 96px);top:calc(100% - 96px);transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(120,170,255,.10),rgba(90,140,255,.05));
  border:2px solid rgba(140,190,255,.30);opacity:.55;transition:opacity .15s;
  display:flex;align-items:center;justify-content:center;}
#joyBase.on{opacity:1;border-color:rgba(150,210,255,.6);
  box-shadow:0 0 22px rgba(90,180,255,.28);}
#joyKnob{width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(180,225,255,.95),rgba(70,130,220,.85));
  border:2px solid rgba(200,235,255,.75);box-shadow:0 3px 14px rgba(0,0,0,.45);
  transition:transform .04s linear;}
/* 조종 중이 아닐 때 살짝 안내 */
#joyBase::after{content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1px dashed rgba(140,190,255,.18);}

/* 터치 모드 화면 배치 — 아래쪽은 조이스틱·부스터가 쓰므로 나머지는 위로 올린다 */
body.touch #botleft{left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top));
  bottom:auto;flex-direction:row;align-items:center;gap:10px;}
body.touch #settingsBtn{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));bottom:auto;}
body.touch #rankPanel{top:calc(58px + env(safe-area-inset-top));}
/* 채팅은 미니맵 '아래'에 둔다. 미니맵 높이가 화면마다 달라서 화면별로 위치를 맞춘다. */
body.touch #chatWrap{left:calc(10px + env(safe-area-inset-left));bottom:auto;
  top:calc(224px + env(safe-area-inset-top));width:min(320px,64vw);}
body.touch #chatLog{max-height:150px;}
body.touch #hint{display:none;}
body.touch #mapWrap .mapTitle{display:none;}   /* 모바일: MAP 글씨 제거 */
/* 모바일 게임 중: 채팅 기록은 입력창을 열었을 때만 보인다(맵을 가리지 않도록) */
body.touch #chatLog{display:none;}
body.touch #chatWrap.typing #chatLog{display:flex;}
/* 모바일 게임 중: 월드레코드·일일랭킹은 숨기고 실시간 순위만 (시작 페이지에서 확인) */
body.touch #hallWrap{display:none;}
body.touch #resetInfo{display:none;}
#boostBtn{position:absolute;left:calc(20px + env(safe-area-inset-left));
  bottom:calc(28px + env(safe-area-inset-bottom));z-index:13;
  width:96px;height:96px;border-radius:50%;flex-direction:column;gap:1px;
  align-items:center;justify-content:center;font-family:inherit;
  background:radial-gradient(circle at 38% 32%,rgba(120,220,255,.34),rgba(30,60,140,.5));
  border:2px solid rgba(140,220,255,.6);color:#dff4ff;
  box-shadow:0 0 18px rgba(90,200,255,.35);user-select:none;-webkit-user-select:none;
  touch-action:none;transition:transform .08s,box-shadow .12s;}
#boostBtn .bbIcon{font-size:28px;line-height:1;}
#boostBtn .bbTxt{font-size:10px;font-weight:800;letter-spacing:1.5px;opacity:.85;}
#boostBtn.on{transform:scale(.93);background:radial-gradient(circle at 38% 32%,rgba(160,240,255,.6),rgba(50,110,200,.7));
  box-shadow:0 0 30px rgba(120,225,255,.75);}
#boostBtn.dim{opacity:.4;}

/* ---------- 좁은 화면 ---------- */
@media (max-width:900px){
  body.touch #chatWrap{top:calc(158px + env(safe-area-inset-top));}
  #rankPanel{width:168px;top:10px;right:10px;padding:7px 8px;}
  #mapWrap{top:10px;left:10px;}
  #minimap{width:112px;height:112px;}
  #botleft{left:10px;bottom:calc(10px + env(safe-area-inset-bottom));gap:8px;}
  #boostWrap{width:92px;}
  #hint{display:none;}
  .hallRowList li .hmn{max-width:52px;}
  .panel{padding:20px 18px;max-height:88vh;max-height:88dvh;overflow-y:auto;}
  h1{font-size:30px;}
}
/* 아주 좁은 화면(폴더블 커버 화면 등) */
@media (max-width:640px){
  body.touch #chatWrap{top:calc(138px + env(safe-area-inset-top));}
  /* 좁은 화면: 위쪽 가운데 공간이 좁으므로 점수만 남기고 연료 게이지는 숨긴다.
     연료 상태는 BOOST 버튼이 흐려지는 것으로 알려준다. */
  body.touch #boostWrap{display:none;}
  body.touch #botleft{gap:0;}
  body.touch .scoreNum{font-size:21px;}
  body.touch .scoreLabel{font-size:9px;}
  /* 좁은 화면에서는 순위표를 더 작고 낮게 — 시야를 가리지 않도록 */
  #rankPanel{width:132px;font-size:9.5px;padding:6px;max-height:46vh;max-height:46dvh;overflow-y:auto;}
  #rankPanel ol li{padding:1px 0;}
  .hallRowTitle,.hallBoxTitle{font-size:9px;}
  .hallColList,.hallRowList{font-size:9.5px;}
  #resetInfo{font-size:8.5px;}
  .rankHead{font-size:9.5px;}
  #minimap{width:96px;height:96px;}
  #mapWrap .mapTitle{font-size:9px;letter-spacing:2px;margin-bottom:3px;}
  .scoreNum{font-size:26px;}
  #boostWrap{width:78px;}
  .skinGrid{grid-template-columns:repeat(4,1fr);gap:5px;}
  #gameActions{flex-direction:column;}
}
@media (max-width:400px){
  /* 위쪽 가로폭이 좁아 미니맵·점수·순위를 한 줄에 못 넣는다.
     점수와 채팅을 미니맵 아래(왼쪽)로 내린다. */
  body.touch #botleft{left:calc(10px + env(safe-area-inset-left));transform:none;
    top:calc(128px + env(safe-area-inset-top));}
  body.touch #chatWrap{top:calc(188px + env(safe-area-inset-top));width:min(210px,62vw);}
  body.touch #chatLog{max-height:112px;}
  body.touch #boostBtn{width:80px;height:80px;left:calc(14px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));}
  body.touch #boostBtn .bbIcon{width:24px;height:24px;}
  #joyBase{width:100px;height:100px;left:calc(100% - 80px);top:calc(100% - 82px);}
  #joyKnob{width:46px;height:46px;}
  body.touch .scoreNum{font-size:20px;}
  body.touch .scoreLabel,.boostLabel{font-size:8.5px;}
  body.touch #boostWrap{width:60px;}
}
@media (max-width:320px){
  body.touch #boostWrap{display:none;}     /* 게이지는 BOOST 버튼으로 대체 */
  #rankPanel{width:112px;}
}

/* 아주 낮은 가로 화면(폴더블을 접어 눕힌 경우 등) — 위아래 공간이 거의 없음 */
/* 가로로 눕힌 폰 — 위아래가 좁아 배치를 따로 잡는다 */
@media (max-height:480px){
  body.touch #mapWrap{top:calc(6px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));}
  body.touch #mapWrap .mapTitle{display:none;}
  body.touch #minimap{width:78px !important;height:78px !important;}
  body.touch #botleft{top:calc(6px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);}
  body.touch #chatWrap{top:calc(6px + env(safe-area-inset-top));
    left:calc(94px + env(safe-area-inset-left));width:min(260px,34vw);}
  body.touch #chatLog{max-height:84px;}
  /* 순위표가 아래 조이스틱까지 내려오지 않도록 높이를 제한 */
  body.touch #rankPanel{top:calc(6px + env(safe-area-inset-top));
    max-height:calc(100dvh - 148px);overflow-y:auto;}
  body.touch #boostBtn{width:72px;height:72px;bottom:calc(14px + env(safe-area-inset-bottom));}
  body.touch #boostBtn .bbTxt{display:none;}
  #joyZone{height:66%;width:46%;}
  #joyBase{width:98px;height:98px;left:calc(100% - 78px);top:calc(100% - 74px);}
  #joyKnob{width:44px;height:44px;}
  #rankPanel{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow-y:auto;}
  #boostBtn{width:74px;height:74px;}
  #boostBtn .bbIcon{font-size:22px;}
  .panel{max-height:92vh;max-height:92dvh;overflow-y:auto;padding:14px 16px;}
  h1{font-size:24px;margin-bottom:4px;}
  .startDesc,.rules{font-size:11px;}
}

/* 아주 낮은 가로 화면(접은 폰을 눕힌 경우 등) — 세로 공간이 거의 없어 최소 구성만 남긴다.
   위쪽 480px 규칙이 body.touch 선택자를 쓰므로, 여기서도 같은 선택자로 덮어써야 한다. */
@media (max-height:360px){
  body.touch #mapWrap{top:calc(5px + env(safe-area-inset-top));left:calc(5px + env(safe-area-inset-left));}
  body.touch #mapWrap .mapTitle{display:none;}
  body.touch #minimap{width:60px !important;height:60px !important;}
  body.touch #botleft{top:calc(5px + env(safe-area-inset-top));}
  body.touch #boostWrap{display:none;}
  body.touch .scoreNum{font-size:18px;}
  /* 채팅 기록은 접고 버튼만 남긴다(공간 부족). 미니맵 바로 아래. */
  body.touch #chatWrap{top:calc(72px + env(safe-area-inset-top));
    left:calc(5px + env(safe-area-inset-left));width:auto;}
  body.touch #chatLog{display:none;}
  /* 순위표가 아래 부스터 버튼까지 내려오지 않도록 */
  body.touch #rankPanel{top:calc(5px + env(safe-area-inset-top));max-height:calc(100dvh - 96px);}
  body.touch #boostBtn{width:60px;height:60px;bottom:calc(10px + env(safe-area-inset-bottom));
    left:calc(10px + env(safe-area-inset-left));}
  body.touch #boostBtn .bbIcon{width:20px;height:20px;}
  body.touch #boostBtn .bbTxt{display:none;}
  #joyZone{height:60%;width:42%;}
  #joyBase{width:78px;height:78px;left:calc(100% - 60px);top:calc(100% - 50px);}
  #joyKnob{width:36px;height:36px;}
  #settingsBtn{width:36px;height:36px;}
}

/* ---------- 설정 ---------- */
.setRow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 4px;font-size:15px;border-bottom:1px solid var(--stroke);}
.setRow:first-of-type{border-top:1px solid var(--stroke);margin-top:6px;}
.toggle{width:auto;margin:0;padding:8px 20px;font-size:13px;border-radius:20px;
  background:linear-gradient(90deg,var(--cyan),#8ad9ff);color:#06122a;}
.toggle.off{background:rgba(120,140,180,.3);color:#aeb9d6;}
#settingsClose{margin-top:18px;background:linear-gradient(90deg,var(--gold),#ff9d3d);}
.setHint{margin-top:10px;font-size:11px;color:#8fa2d6;}
/* 볼륨 슬라이더 */
.volRow{padding:11px 4px;}
.volLbl{font-size:13px;color:#c3d0f5;flex:0 0 auto;}
.vol{-webkit-appearance:none;appearance:none;flex:1;height:6px;margin:0;padding:0;border-radius:4px;
  background:rgba(120,140,180,.3);outline:none;cursor:pointer;}
.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,var(--cyan),#8ad9ff);border:2px solid #06122a;box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:pointer;}
.vol::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--cyan);border:2px solid #06122a;cursor:pointer;}
.volPct{flex:0 0 auto;width:42px;text-align:right;font-size:12px;color:#9fb2e6;font-variant-numeric:tabular-nums;}
#settingsBtn{position:fixed;right:16px;bottom:16px;z-index:12;width:46px;height:46px;padding:0;margin:0;
  border-radius:50%;font-size:20px;line-height:1;background:var(--panel);border:1px solid var(--stroke);
  color:#fff;pointer-events:auto;backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.4);}

/* ---------- 구글 광고 자리 (좌·우·하단, 플레이스홀더) ---------- */
#adLeft{left:8px;} #adRight{right:8px;}
.adInner{opacity:.75;}
/* 화면이 좁으면 게임을 가리지 않게 자동 숨김 */
/* 게임 플레이 중에는 화면 가장자리 광고를 숨긴다.
   마우스로 조종하는 게임이라 가장자리에 광고가 있으면 실수로 클릭될 수 있고,
   그런 배치는 애드센스 정책 위반(무효 클릭 유도)에 해당한다. */
body.playing .adSide,
body.playing 
@media (max-width:1200px){  }
@media (max-width:720px){  }

/* ============ 시작 화면을 '페이지'로 — 반투명 우주 배경 위 스크롤되는 본문 ============ */
#start.pageMode{display:block;overflow-y:auto;overflow-x:hidden;align-items:stretch;
  -webkit-overflow-scrolling:touch;}

/* 첫 화면 배경 — 실제 플레이 장면을 캔버스로 직접 그린다(public/js/herobg.js).
   그림 파일이 아니라 매 프레임 그리는 연출이라 추가 다운로드가 없고, 게임과 그림체가 같다.
   #start 가 쌓임 문맥을 만들므로 z-index:-1 이면 #start 배경 위 · 모든 내용 아래에 들어간다.
   → 내비게이션·패널의 z-index 를 건드릴 필요가 없다. */
#heroBg{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;}
/* 게임에 들어가면 배경은 숨는다(실제 게임 화면이 보여야 하므로) */
#start:not(.pageMode) #heroBg{display:none;}

/* 실시간 배경 — 뒤에서 실제 게임(1위 시점)이 흐를 때.
   #start 자신의 어두운 막을 걷어 게임이 보이게 하고, 대신 가운데만 눌러 준다.
   z-index:-1 이라 #start 배경 위 · 패널 아래에 정확히 들어간다. */
body.previewLive #start.pageMode{background:none;backdrop-filter:none;}
body.previewLive #start.pageMode::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* 패널이 앉는 위쪽 가운데만 눌러 글씨를 살리고, 아래·옆은 게임이 잘 보이게 둔다.
     (예전엔 가운데를 넓고 진하게 덮어서 정작 볼 게 하나도 없었다) */
  /* 볼 거리는 왼쪽에 몰아 두고, 패널이 앉는 가운데~오른쪽만 눌러 글씨를 살린다 */
  background:
    radial-gradient(46% 40% at 52% 30%,rgba(5,7,18,.90) 0%,rgba(5,7,18,.60) 60%,rgba(5,7,18,0) 100%),
    linear-gradient(90deg,rgba(5,7,18,0) 0%,rgba(5,7,18,.10) 26%,rgba(5,7,18,.46) 62%,rgba(5,7,18,.62) 100%),
    linear-gradient(180deg,rgba(5,7,18,.40) 0%,rgba(5,7,18,.12) 32%,rgba(5,7,18,.12) 74%,rgba(5,7,18,.86) 100%);
}
/* 배경 연출/실시간 어느 쪽도 못 쓰는 화면(모바일)에서는 원래 어두운 막을 그대로 쓴다 */

/* 상단 고정 내비게이션 */
.siteNav{position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);
  background:rgba(6,9,22,.78);border-bottom:1px solid rgba(120,160,255,.16);}
.navInner{max-width:920px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px;}
.brand{font-size:15px;font-weight:800;letter-spacing:1px;color:#eaf0ff;text-decoration:none;white-space:nowrap;}
.brand span{color:var(--gold);}
.navToggle{display:none;margin:0 0 0 auto;width:auto;flex:none;background:none;border:1px solid var(--stroke);
  color:#cfe0ff;border-radius:8px;padding:5px 7px;cursor:pointer;}
.navLinks{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:nowrap;}
.navLinks a{padding:6px 7px;border-radius:7px;font-size:12.5px;color:#9fb2e6;text-decoration:none;white-space:nowrap;}
.navLinks a:hover{color:#fff;background:rgba(120,160,255,.14);}
.navDiv{width:1px;height:12px;background:rgba(140,170,220,.28);margin:0 4px;}
/* 언어 선택 — 개인정보·이용약관과 한 덩어리로 묶어 줄바꿈 때 흩어지지 않게 */
.navTail{display:inline-flex;align-items:center;gap:2px;flex:none;}
.langWrap{position:relative;margin-left:5px;flex:none;}
.langBtn{display:flex;align-items:center;gap:6px;background:rgba(120,160,255,.10);
  border:1px solid var(--stroke);color:#cfe0ff;border-radius:7px;padding:4px 8px;margin:0;width:auto;
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.langBtn:hover{background:rgba(120,180,255,.24);color:#fff;}
.flg{width:18px;height:12px;flex:none;border-radius:2px;overflow:hidden;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);}
.flg svg{display:block;width:100%;height:100%;}
.cv{width:0;height:0;margin-left:1px;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.65;}
/* 언어가 12개로 늘면서 가로 화면(권장 자세)에서 아래 두 개가 잘렸다.
   화면에 남는 높이만큼만 쓰고 넘치면 안에서 스크롤한다. */
.langMenu{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain;
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;margin:0;padding:5px;
  list-style:none;min-width:152px;background:#0e1430;border:1px solid rgba(120,160,255,.36);
  border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.6);}
.langMenu li{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;
  font-size:12.5px;color:#c7d6f7;cursor:pointer;white-space:nowrap;}
.langMenu li:hover{background:rgba(120,180,255,.26);color:#fff;}
.langMenu li.on{background:rgba(120,180,255,.16);color:#fff;font-weight:700;}
.langMenu li.on::after{content:'¹3';margin-left:auto;color:var(--gold);font-size:12px;}

/* 본문 */
.pageBody{max-width:920px;margin:0 auto;padding:24px 18px 70px;}
.heroPanel{width:100%;max-width:440px;margin:14px auto 34px;}
.scrollCue{display:inline-block;margin-top:14px;font-size:12px;color:#8ea3cc;text-decoration:none;}
.scrollCue:hover{color:#dfe9ff;}
.scrollCue::after{content:'';display:block;width:9px;height:9px;margin:5px auto 0;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);}

.pageSec{background:rgba(10,14,32,.66);border:1px solid rgba(120,160,255,.16);border-radius:16px;
  padding:26px 26px 22px;margin:0 0 18px;text-align:left;}
.pageSec h2{margin:0 0 14px;font-size:21px;color:#fff;letter-spacing:-.3px;}
.pageSec h3{margin:22px 0 8px;font-size:15px;color:#9fd0ff;font-weight:700;}
.pageSec h3:first-of-type{margin-top:4px;}
.pageSec p,.pageSec li{font-size:14px;line-height:1.85;color:#c2cde6;}
.pageSec p{margin:0 0 11px;}
.pageSec ul{margin:0 0 14px;padding-left:20px;}
.pageSec li{margin:5px 0;}
.pageSec b{color:#eaf2ff;}
.pageSec a{color:var(--cyan);}
.pageSec .ctl{width:100%;border-collapse:collapse;margin:0 0 13px;}
.pageSec .ctl td{padding:9px 10px;border-bottom:1px solid rgba(120,160,255,.13);vertical-align:top;font-size:13.5px;}
.pageSec .ctl td:first-child{width:40%;color:#dfe9ff;font-weight:600;}
.pageSec .mailBig{font-size:17px;font-weight:700;margin:6px 0 16px;}
.pageSec .callout{background:linear-gradient(135deg,rgba(255,196,80,.13),rgba(255,150,60,.06));
  border:1px solid rgba(255,196,80,.34);border-radius:12px;padding:18px 20px;margin:20px 0;}
.pageSec .callout h3{margin-top:0;color:#ffca63;}
.pageSec .callout p{margin-bottom:0;}
.pageSec .note{background:rgba(120,160,255,.07);border:1px solid rgba(120,160,255,.16);
  border-radius:12px;padding:16px 18px;margin:0 0 12px;}
.pageSec .note h3{margin:3px 0 7px;font-size:14.5px;color:#eaf2ff;}
.pageSec .note p:last-child,.pageSec .note ul:last-child{margin-bottom:0;}
.pageSec .noteDate{font-size:11.5px;color:#7f90b5;letter-spacing:.3px;}

/* ── 독립 페이지 껍데기 (커뮤니티 · FAQ · 기부) ── */
/* 우주 게임 사이트인데 배경이 단색 그라데이션뿐이면 심심하다.
   별밭 + 성운을 CSS 로만 깔아 그림 파일 없이 우주 느낌을 준다(고정 배경이라 스크롤해도 안 흔들림). */
.pgBody{margin:0;min-height:100vh;color:#dfe6f2;
  background:
    /* 큰 별 몇 개 */
    radial-gradient(1.6px 1.6px at 12% 18%,rgba(255,255,255,.85),transparent 100%),
    radial-gradient(1.8px 1.8px at 78% 12%,rgba(210,235,255,.9),transparent 100%),
    radial-gradient(1.5px 1.5px at 33% 62%,rgba(255,246,214,.8),transparent 100%),
    radial-gradient(1.7px 1.7px at 88% 74%,rgba(255,255,255,.75),transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 88%,rgba(200,225,255,.7),transparent 100%),
    /* 성운 — 은은한 색 얼룩 */
    radial-gradient(58% 42% at 82% 8%,rgba(120,90,220,.20),transparent 70%),
    radial-gradient(52% 38% at 8% 34%,rgba(60,150,220,.17),transparent 72%),
    radial-gradient(46% 34% at 68% 82%,rgba(220,120,90,.11),transparent 74%),
    /* 잔별 — 촘촘한 점 두 겹 */
    radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,.30),transparent 100%),
    radial-gradient(1px 1px at 95px 78px,rgba(255,255,255,.22),transparent 100%),
    radial-gradient(1px 1px at 152px 22px,rgba(255,255,255,.26),transparent 100%),
    radial-gradient(1px 1px at 58px 130px,rgba(255,255,255,.18),transparent 100%),
    /* 바탕 */
    radial-gradient(130% 95% at 50% -12%,#161d42,#05070f 64%) #05070f;
  background-size:
    100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,
    100% 100%,100% 100%,100% 100%,
    190px 170px,190px 170px,190px 170px,190px 170px,
    100% 100%;
  background-attachment:fixed;
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Hiragino Sans','Yu Gothic','Meiryo','Microsoft YaHei','PingFang SC','Noto Sans SC','Nirmala UI','Noto Sans Devanagari','Mangal','Segoe UI','Noto Sans','Noto Sans Symbols 2','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',system-ui,sans-serif;}
.pgNav{position:sticky;top:0;z-index:40;background:rgba(6,9,22,.90);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(120,160,255,.16);}
.pgNavIn{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.pgBrand{font-weight:900;font-size:15px;letter-spacing:1px;color:#eaf2ff;text-decoration:none;flex:none;}
.pgBrand span{color:#ffd24a;}
.pgLinks{display:flex;gap:2px;flex-wrap:wrap;flex:1;min-width:0;}
.pgLinks a{padding:6px 8px;border-radius:7px;font-size:12.5px;color:#9fb2e6;text-decoration:none;white-space:nowrap;}
.pgLinks a:hover{color:#fff;background:rgba(120,160,255,.14);}
.pgLinks a.on{color:#fff;background:rgba(120,190,255,.22);}
.pgLang select{background:rgba(120,160,255,.10);border:1px solid rgba(120,160,255,.24);
  color:#cfe0ff;border-radius:7px;padding:5px 8px;font-family:inherit;font-size:12px;font-weight:600;}
.pgMain{max-width:1120px;margin:0 auto;padding:22px 16px 60px;}
.pgNarrow{max-width:820px;}
.pgHead h1{font-size:24px;margin:0 0 8px;color:#fff;letter-spacing:-.3px;}
.pgHead p{font-size:14px;color:#9fb2e6;margin:0 0 6px;line-height:1.8;}
.pgWho{font-size:12.5px;color:#7f90b5;margin-bottom:14px;}
.pgWhoName{color:#9fd0ff;font-weight:700;}
.pgWhoLogin{color:var(--cyan,#5fe6ff);}
.pgCols{display:grid;grid-template-columns:206px 1fr;gap:18px;align-items:start;}
.pgSide{position:sticky;top:66px;display:flex;flex-direction:column;gap:12px;}
.pgBody2{min-width:0;}
.cmNav{display:flex;flex-direction:column;gap:4px;background:rgba(10,14,32,.6);
  border:1px solid rgba(120,160,255,.16);border-radius:13px;padding:7px;}
.cmNavBtn{display:flex;align-items:center;gap:9px;background:none;border:none;margin:0;width:100%;
  color:#9fb2e6;border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px;
  text-align:left;cursor:pointer;}
.cmNavBtn:hover{background:rgba(120,160,255,.12);color:#fff;}
.cmNavBtn.on{background:rgba(120,190,255,.22);color:#fff;}
.cmNavBtn span{font-size:15px;flex:none;}
.cmNavBtn b{font-weight:700;}
.cmSideBox{background:rgba(10,14,32,.6);border:1px solid rgba(120,160,255,.16);
  border-radius:13px;padding:12px;}
.cmSideH{font-size:11.5px;color:#7f90b5;letter-spacing:.3px;margin-bottom:9px;}
.cmSideBox .cmRankStrip{grid-template-columns:1fr;gap:7px;margin:0;}
.cmSideLink{display:inline-block;font-size:12.5px;color:#8ea3cc;text-decoration:none;padding:2px 4px;}
.cmSideLink:hover{color:#fff;}
.cmView.hidden{display:none;}
.cmView h2{font-size:19px;color:#fff;margin:0 0 8px;}
.cmView .cmH2{margin-top:28px;}
.cmView h3{font-size:15px;color:#9fd0ff;margin:24px 0 8px;}
@media(max-width:800px){
  .pgCols{grid-template-columns:1fr;}
  .pgSide{position:static;}
  .cmNav{flex-direction:row;overflow-x:auto;}
  .cmNavBtn{flex:none;white-space:nowrap;}
}

/* 게시판 (포럼) */
.cmWriteBox{margin:0 0 16px;}
.cmArea{width:100%;box-sizing:border-box;min-height:110px;resize:vertical;margin-top:8px;
  background:rgba(8,11,26,.6);border:1px solid rgba(120,160,255,.24);color:#eaf2ff;
  border-radius:9px;padding:10px 11px;font-family:inherit;font-size:13.5px;line-height:1.7;}
.cmWriteFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;}
.bdList{list-style:none;margin:6px 0 0;padding:0;}
.bdRow{border-bottom:1px solid rgba(120,160,255,.10);padding:11px 2px;}
.bdRow:hover{background:rgba(120,160,255,.05);}
.bdLink{display:block;font-size:14.5px;color:#eaf2ff;text-decoration:none;font-weight:600;
  margin-bottom:5px;word-break:break-word;}
.bdLink:hover{color:#9fd0ff;}
.bdLink em{font-style:normal;font-size:10.5px;color:#ffb4b4;background:rgba(255,90,90,.18);
  border-radius:5px;padding:1px 5px;vertical-align:1px;}
.bdRowMeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:#7f90b5;}
.bdWho{color:#9fb2e6;}
.bdDot{opacity:.5;}
.bdStat{margin-left:2px;}
.cmBackBtn{background:rgba(120,160,255,.10);border:1px solid rgba(120,160,255,.22);color:#cfe0ff;
  border-radius:8px;padding:6px 13px;margin:0 0 14px;width:auto;
  font-family:inherit;font-size:12.5px;cursor:pointer;}
.cmBackBtn:hover{background:rgba(120,190,255,.24);color:#fff;}
.bdPost{background:rgba(10,14,32,.55);border:1px solid rgba(120,160,255,.16);
  border-radius:13px;padding:18px 18px 14px;}
.bdPost h2{margin:0 0 9px;font-size:20px;}
.bdMeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid rgba(120,160,255,.12);}
.bdMeta .cmBy{justify-content:flex-start;}
.bdBody{font-size:14px;line-height:1.9;color:#c8d2e8;word-break:break-word;margin-bottom:14px;}
.cmCmtH{margin-top:26px !important;}
.cmBan{background:rgba(255,90,90,.14) !important;border-color:rgba(255,120,120,.4) !important;color:#ffb4b4 !important;}
.cmBan:hover{background:rgba(255,90,90,.34) !important;color:#fff !important;}

/* ── 월드레코드 전시 카드 (커뮤니티 · 메인화면 공용 부품) ──
   어두운 배경에 반투명 색을 얹으면 '더 어두워지기만' 해서 하나도 빛나 보이지 않는다.
   그래서 빛 요소는 모두 mix-blend-mode:screen 으로 '더하기' 합성한다 — 인게임 보물상자와 같은 방식. */
/* 빛은 '덧대는 층'이 아니라 물체 자체에서 나와야 빛나 보인다.
   그래서 별도 레이어(회전 빛살·블러 원·스치는 흰 막대)는 전부 없앴다.
   흰 막대가 지나가는 건 광택이 아니라 그냥 흰 막대다.
   대신 두 가지만 제대로 한다.
     1) 카드 밖으로 새어 나오는 금빛(box-shadow) — 이게 있어야 '발광체'로 읽힌다
     2) 숫자 안쪽을 지나가는 하이라이트 — 글자에 클립해서 금속 표면처럼 보이게 */
@keyframes wrShine{
  0%       {background-position:190% 0}
  55%,100% {background-position:-40% 0}
}

/* 카드는 폭을 다 채우지 않는다 — 내용만큼만 잡고 가운데. (메인화면 줄 카드와 같은 원칙) */
.wrCard{position:relative;overflow:hidden;text-align:center;
  width:fit-content;max-width:100%;margin:12px auto 16px;
  padding:24px 44px 20px;border-radius:18px;isolation:isolate;
  /* 숫자 뒤에서 번지는 금빛을 카드 배경 자체에 넣는다(층을 얹지 않는다) */
  background:radial-gradient(66% 84% at 50% 60%,rgba(255,176,50,.26),transparent 70%),
    linear-gradient(180deg,#241a09,#0b0f22);
  border:1px solid rgba(255,196,80,.46);
  /* 바깥으로 새어 나오는 금빛 — 이게 있어야 '빛나는 물체'로 읽힌다 */
  box-shadow:0 0 42px -6px rgba(255,178,54,.36),0 14px 40px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,240,200,.30);}
.wrCard>*{position:relative;}
.wrCrown{font-size:34px;line-height:1;
  filter:drop-shadow(0 0 14px rgba(255,206,80,.9)) drop-shadow(0 4px 10px rgba(255,150,40,.5));}
.wrLbl{margin-top:5px;font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:#ffca63;font-weight:800;}
.wrName{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;
  font-size:21px;font-weight:800;color:#fff;}
.wrFlag{width:28px;height:19px;flex:none;border-radius:3px;overflow:hidden;display:inline-block;
  box-shadow:0 0 0 1px rgba(255,255,255,.2);}
.wrScore{margin-top:4px;display:flex;align-items:baseline;justify-content:center;gap:6px;}
.wrScore b{font-size:44px;font-weight:900;line-height:1.05;letter-spacing:-1px;
  /* 금속 결 + 그 위를 지나가는 하이라이트. 글자에 클립돼 있어 '숫자가 반짝'인다. */
  background:linear-gradient(100deg,
    #b9761d 0%,#e8a52e 22%,#ffd968 40%,#fffdf2 48%,#ffd968 56%,#e8a52e 74%,#b9761d 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,180,50,.55));
  animation:wrShine 6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.wrScore b{animation:none;background-position:48% 0}}
.wrScore em{font-style:normal;font-size:12.5px;color:#e0b878;font-weight:700;}
.wrAt{margin-top:5px;font-size:11.5px;color:#a08a63;}
.wrHint{margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,196,80,.20);
  font-size:11.5px;color:#8fa2d6;line-height:1.6;max-width:340px;margin-inline:auto;}
.wrCard--empty .wrEmpty{margin-top:10px;font-size:13px;color:#8fa2d6;}

/* 메인화면 명예의 전당 줄에 얹는 형태.
   부모(.hallRow)가 flex 라 목록이 내용 크기로 쪼그라들어 카드가 왼쪽에 몰려 있었다.
   → 목록과 카드 모두 남는 폭을 끝까지 쓰도록 명시한다. */
/* 카드는 폭을 다 채우지 않는다 — 내용만큼만 잡고 가운데에 둔다.
   (꽉 채웠더니 안쪽 여백만 넓어져 허전했다) */
.wrRow{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center;
  flex:1 1 auto;min-width:0;box-sizing:border-box;}
.wrRow .wrLi{width:auto;max-width:100%;box-sizing:border-box;flex:0 1 auto;}
/* 카드가 자기 테두리를 갖고 있으니 바깥 금색 박스는 지운다(테두리가 이중으로 보였다).
   인게임 HUD 의 같은 줄(#hallRecord)에는 카드를 안 쓰므로 :has 로 구분한다. */
.hallRow.wr:has(.wrLi){background:none;border-color:transparent;padding:0;}
.wrRow .wrLi{position:relative;display:flex;align-items:center;gap:20px;
  padding:16px 22px;border-radius:14px;
  background:radial-gradient(78% 140% at 72% 55%,rgba(255,176,50,.24),transparent 72%),
    linear-gradient(180deg,#241a09,#0b0f22);
  border:1px solid rgba(255,196,80,.42);
  box-shadow:0 0 30px -6px rgba(255,178,54,.32),0 8px 24px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,240,200,.26);}
/* 왕관은 이름 옆에 붙는다(우주선 자리를 뺏지 않도록) */
.wrRow .wrCrown{font-size:22px;flex:none;line-height:1;
  filter:drop-shadow(0 0 11px rgba(255,206,80,.85));}
.wrRow .wrMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left;}
.wrRow .wrName{margin:0;font-size:23px;justify-content:flex-start;gap:8px;}
.wrRow .wrName span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wrRow .wrFlag{width:29px;height:20px;flex:none;}
.wrRow .wrAt{margin:0;font-size:11.5px;}
.wrRow .wrScore{margin:0;flex:none;flex-direction:column;align-items:flex-end;gap:0;}
.wrRow .wrScore b{font-size:38px;}
.wrRow .wrScore em{font-size:11.5px;}
/* 좁은 화면에서는 우주선·글씨를 같이 줄여 한 줄을 유지한다 */
@media(max-width:640px){
  .wrRow .wrLi{gap:13px;padding:13px 15px;}
  .wrRow .wrName{font-size:18px;gap:6px;}
  .wrRow .wrCrown{font-size:18px;}
  .wrRow .wrFlag{width:24px;height:17px;}
  .wrRow .wrScore b{font-size:28px;}
}
@media(max-width:420px){
  .wrRow .wrLi{gap:10px;padding:11px 12px;}
  .wrRow .wrName{font-size:16px;}
  .wrRow .wrScore b{font-size:23px;}
}
.wrRow .hempty{padding:12px;color:#7f90b5;font-size:13px;text-align:center;}

/* 전체 랭킹 */
.rkCols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px;}
.rkCols2{grid-template-columns:repeat(2,1fr);}
.rkBox{background:rgba(10,14,32,.55);border:1px solid rgba(120,160,255,.16);
  border-radius:13px;padding:14px;min-width:0;}
.rkH{font-size:12px;color:#ffd24a;font-weight:700;letter-spacing:.3px;margin-bottom:9px;}
.rkList{list-style:none;counter-reset:rk;margin:0;padding:0;}
.rkList li{counter-increment:rk;display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid rgba(120,160,255,.08);font-size:13px;}
.rkList li:last-child{border-bottom:none;}
.rkList li::before{content:counter(rk);flex:none;width:17px;font-size:10.5px;color:#7f90b5;font-weight:700;}
.rkList li.cmEmpty::before{content:'';width:0;}
.rkName{flex:1;min-width:0;display:flex;align-items:center;gap:6px;color:#eaf2ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rkList b{color:#ffd24a;font-size:13.5px;flex:none;}
@media(max-width:800px){ .rkCols{grid-template-columns:1fr;} }

/* 갤러리 빈 안내가 격자 한 칸에 갇혀 글자가 세로로 쪼개지던 문제 */
.cmGrid > .cmEmpty{grid-column:1/-1;}

/* ── 기부 한 줄 띠 (메인 화면 메뉴바 바로 아래) ── */
.pawStrip{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:8px 16px;text-decoration:none;
  background:linear-gradient(90deg,rgba(255,190,90,.14),rgba(255,150,60,.09));
  border-bottom:1px solid rgba(255,190,90,.26);}
.pawStrip:hover{background:linear-gradient(90deg,rgba(255,190,90,.24),rgba(255,150,60,.16));}
.pawStripIcon{font-size:15px;flex:none;}
.pawStripTxt{font-size:12.5px;color:#ffdca0;font-weight:600;text-align:center;line-height:1.5;}
.pawStripGo{font-size:13px;color:#ffca63;flex:none;}
@media(max-width:520px){ .pawStripTxt{font-size:11.5px;} }

/* ── 꾸미기 예시 — 선체 밖으로 그려도 그대로 나온다 ── */
.exBox{background:rgba(120,160,255,.06);border:1px solid rgba(120,160,255,.18);
  border-radius:12px;padding:13px 14px;margin:12px 0 4px;}
.exH{font-size:12.5px;font-weight:700;color:#9fd0ff;margin-bottom:10px;text-align:center;}
.exRow{display:flex;align-items:center;justify-content:center;gap:10px;}
.exCell{margin:0;flex:1;min-width:0;text-align:center;}
.exCell canvas{width:100%;height:auto;max-width:150px;image-rendering:pixelated;border-radius:9px;
  border:1px solid rgba(120,160,255,.2);
  background:repeating-conic-gradient(#161c2e 0 25%,#10141f 0 50%) 0 0/12px 12px;}
.exCell figcaption{font-size:10.5px;color:#8fa2d6;margin-top:6px;line-height:1.5;}
.exArrow{flex:none;color:#ffd479;font-size:19px;font-weight:700;}
.exNote{font-size:11.5px;color:#8fa2d6;line-height:1.75;margin:11px 0 0;text-align:center;}
.exNote b{color:#ffd479;}

/* ── 커뮤니티 — 디자인 갤러리 · 어워드 · 댓글 ── */
.navCm{color:#9be7ff !important;font-weight:700;}
.navCm:hover{background:rgba(120,220,255,.16) !important;}
.cmLead{margin:0 0 16px !important;}
.cmSub{font-size:12.5px !important;color:#8fa2d6 !important;margin:-4px 0 12px !important;}

.cmRankStrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 8px;}
.cmRankCell{background:rgba(120,160,255,.07);border:1px solid rgba(120,160,255,.18);
  border-radius:11px;padding:11px 13px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.cmRankLbl{font-size:11px;color:#7f90b5;letter-spacing:.3px;}
.cmRankName{font-size:13.5px;color:#eaf2ff;font-weight:700;display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmRankVal{font-size:15px;color:#ffd24a;font-weight:800;}
.cmDim{color:#6e7fa4 !important;font-weight:400 !important;}
.cmRankLink{display:inline-block;font-size:12.5px;margin:0 0 4px;}
.cmFlag{width:19px;height:13px;flex:none;border-radius:2px;overflow:hidden;display:inline-block;
  vertical-align:-2px;box-shadow:0 0 0 1px rgba(255,255,255,.14);}

.cmGrid,.cmPodium{display:grid;gap:12px;margin:12px 0 0;}
.cmGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.cmPodium{grid-template-columns:repeat(3,1fr);}
.cmCard{position:relative;background:rgba(8,11,26,.55);border:1px solid rgba(120,160,255,.18);
  border-radius:13px;padding:12px 12px 10px;text-align:center;cursor:pointer;min-width:0;}
.cmCard:hover{border-color:rgba(120,190,255,.44);background:rgba(14,20,44,.7);}
.cmCard--award{border-color:rgba(255,196,80,.42);background:linear-gradient(160deg,rgba(48,36,12,.6),rgba(8,11,26,.6));}
.cmMedal{position:absolute;top:-9px;left:-6px;font-size:24px;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.6));pointer-events:none;}
.cmHidden{position:absolute;top:8px;right:8px;font-size:10px;background:rgba(255,90,90,.22);
  border:1px solid rgba(255,120,120,.42);color:#ffb4b4;border-radius:6px;padding:2px 6px;}
.cmArt{display:flex;justify-content:center;margin-bottom:8px;}
.cmArt canvas{image-rendering:pixelated;background:repeating-conic-gradient(#161c2e 0 25%,#10141f 0 50%) 0 0/12px 12px;
  border-radius:8px;border:1px solid rgba(120,160,255,.16);max-width:100%;}
.cmTitle{margin:0 0 5px;font-size:13.5px;color:#eaf2ff;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmBy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:#9fb2e6;
  white-space:nowrap;overflow:hidden;}
.cmActs{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px;flex-wrap:wrap;}
.cmVote,.cmOpen,.cmMini{background:rgba(120,160,255,.10);border:1px solid rgba(120,160,255,.22);
  color:#cfe0ff;border-radius:8px;padding:4px 9px;margin:0;width:auto;
  font-family:inherit;font-size:11.5px;cursor:pointer;line-height:1.4;}
.cmVote:hover,.cmOpen:hover,.cmMini:hover{background:rgba(120,190,255,.24);color:#fff;}
.cmVote.on{background:rgba(255,90,130,.24);border-color:rgba(255,120,160,.55);color:#ffc0d4;}
.cmVote:disabled{opacity:.45;cursor:default;}
.cmMini{padding:4px 7px;}
.cmAgo{font-size:10.5px;color:#6e7fa4;}

.cmBar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 0;flex-wrap:wrap;}
.cmSorts{display:flex;gap:6px;}
.cmTab{background:rgba(120,160,255,.08);border:1px solid rgba(120,160,255,.20);color:#9fb2e6;
  border-radius:9px;padding:6px 14px;margin:0;width:auto;font-family:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;}
.cmTab.on{background:rgba(120,190,255,.26);border-color:rgba(120,200,255,.5);color:#fff;}
.cmCount{font-size:12px;color:#7f90b5;}
.cmMore{display:block;margin:14px auto 0;background:rgba(120,160,255,.10);
  border:1px solid rgba(120,160,255,.24);color:#cfe0ff;border-radius:10px;padding:9px 26px;width:auto;
  font-family:inherit;font-size:13px;cursor:pointer;}
.cmMore:hover{background:rgba(120,190,255,.24);color:#fff;}
.cmEmpty{font-size:13px;color:#7f90b5;text-align:center;padding:18px 0;margin:0;}
.cmRules{font-size:11.5px !important;color:#7f90b5 !important;line-height:1.8 !important;margin:18px 0 0 !important;}

.cmPostRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.cmSel,.cmInput{background:rgba(8,11,26,.6);border:1px solid rgba(120,160,255,.24);color:#eaf2ff;
  border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px;margin:0;}
.cmInput{flex:1;min-width:180px;}
.cmSel{flex:none;}
.cmBtn{background:linear-gradient(180deg,#5fe6ff,#3aa9dd);color:#06122a;font-weight:800;
  border:none;border-radius:9px;padding:9px 20px;margin:0;width:auto;
  font-family:inherit;font-size:13px;cursor:pointer;flex:none;}
.cmBtn:hover{filter:brightness(1.08);}
.cmMsg{font-size:12px;margin-top:7px;min-height:16px;color:#9fb2e6;}
.cmMsg.ok{color:#7ee0a0;} .cmMsg.bad{color:#ff9d9d;}
.cmLoginNote{font-size:12.5px;color:#9fb2e6;background:rgba(120,160,255,.07);
  border:1px solid rgba(120,160,255,.16);border-radius:10px;padding:12px 14px;}

/* 상세 + 댓글 */
.cmDlg{position:fixed;inset:0;z-index:80;background:rgba(4,6,16,.78);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;}
.cmDlg[hidden]{display:none;}
body.cmOpen{overflow:hidden;}
.cmDlgBox{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:#0b1024;border:1px solid rgba(120,160,255,.26);border-radius:16px;padding:20px;text-align:left;}
.cmDlgX{position:absolute;top:10px;right:10px;background:rgba(120,160,255,.12);border:none;
  color:#cfe0ff;border-radius:8px;width:30px;height:30px;padding:0;margin:0;font-size:14px;cursor:pointer;}
.cmDlgX:hover{background:rgba(255,120,120,.3);color:#fff;}
.cmDlgTop{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px;}
.cmDlgArt canvas{image-rendering:pixelated;border-radius:10px;border:1px solid rgba(120,160,255,.2);
  background:repeating-conic-gradient(#161c2e 0 25%,#10141f 0 50%) 0 0/14px 14px;}
.cmDlgMeta{flex:1;min-width:180px;}
.cmDlgMeta h3{margin:2px 0 7px;font-size:17px;color:#fff;}
.cmDlgMeta .cmBy{justify-content:flex-start;}
.cmDlgVotes{margin-top:9px;font-size:15px;color:#ffc0d4;font-weight:700;}
.cmDlgHint{font-size:11.5px;color:#7f90b5;line-height:1.7;margin:10px 0 0;}
.cmDlgList{border-top:1px solid rgba(120,160,255,.14);padding-top:12px;max-height:38vh;overflow-y:auto;}
.cmCmt{padding:8px 0;border-bottom:1px solid rgba(120,160,255,.08);}
.cmCmt:last-child{border-bottom:none;}
.cmCmtHead{display:flex;gap:8px;align-items:baseline;font-size:12px;}
.cmCmtHead b{color:#9fd0ff;} .cmCmtHead span{color:#6e7fa4;font-size:10.5px;}
.cmCmtBody{font-size:13px;color:#c2cde6;line-height:1.7;margin-top:3px;word-break:break-word;}
.cmCmtForm{display:flex;gap:8px;margin-top:12px;}

@media(max-width:640px){
  .cmPodium{grid-template-columns:1fr;}
  .cmGrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));}
  .cmRankStrip{grid-template-columns:1fr;}
  .cmDlgBox{padding:16px;}
}

/* ── 유기견 기부 — 안내 본문 속 한 문단이 아니라 독립 섹션으로 뺐다 ── */
.navPaw{color:#ffcf7a !important;font-weight:700;}
.navPaw:hover{background:rgba(255,190,90,.16) !important;}
.donateSec{background:linear-gradient(150deg,rgba(46,28,12,.82),rgba(12,16,34,.75) 62%);
  border-color:rgba(255,190,90,.32);padding:0;overflow:hidden;}
.donateBox{padding:30px 26px 26px;text-align:center;position:relative;}
.donateBox::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 78% at 50% -14%,rgba(255,190,90,.20),transparent 62%);}
.donateBox>*{position:relative;}
.donatePaw{font-size:38px;line-height:1;margin-bottom:8px;
  filter:drop-shadow(0 4px 14px rgba(255,180,80,.42));}
.donateSec h2{margin:0 0 12px;color:#ffd489;font-size:22px;}
.donateLead{max-width:640px;margin:0 auto 22px;font-size:14.5px;line-height:1.85;color:#e6ddcc;}
.donateLead b{color:#ffd489;}
.donateGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px;text-align:left;}
.donateCard{background:rgba(8,11,26,.52);border:1px solid rgba(255,190,90,.22);
  border-radius:12px;padding:16px 16px 14px;}
.donateIcon{font-size:21px;line-height:1;margin-bottom:9px;}
.donateSec .donateCard h3{margin:0 0 6px;font-size:14px;color:#ffd489;}
.donateSec .donateCard p{margin:0;font-size:13px;line-height:1.7;color:#bcc6de;}
.donateSec .donateCard b{color:#ffe6b5;}
.donateBtn{display:inline-block;background:linear-gradient(180deg,#ffc866,#f0a032);
  color:#3a2408 !important;font-weight:800;font-size:14px;text-decoration:none;
  padding:11px 24px;border-radius:11px;box-shadow:0 5px 18px rgba(240,160,50,.30);}
.donateBtn:hover{filter:brightness(1.08);}
.donateNote{margin:16px auto 0 !important;max-width:600px;font-size:12.5px !important;
  line-height:1.75 !important;color:#93a0bd !important;}
@media(max-width:640px){
  .donateGrid{grid-template-columns:1fr;}
  .donateBox{padding:24px 18px 22px;}
  .donateSec h2{font-size:19px;}
}

.rankSec .hallRow{margin-bottom:8px;}
.rankSec .hallBox{padding:10px 12px;}
.rankSec .hallRowList li .hmn,.rankSec .hallColList li .hmn{max-width:none;font-size:13px;}
.rankSec .hallColList li{padding:4px 0;font-size:13px;}
.rankSec .hallRowList li .htr,.rankSec .hallColList li .htr{font-size:14px;}
.rankReset{margin-top:9px;font-size:11.5px;color:#7f90b5;}
/* 공유 버튼 */
#shareRow{display:flex;gap:8px;margin-top:14px;}
.shareBtn{flex:1;margin-top:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 10px;border-radius:11px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  border:1px solid rgba(140,190,255,.4);color:#07142a;
  background:linear-gradient(135deg,#7ee0ff,#4da6ff);}
.shareBtn.alt{background:rgba(255,255,255,.08);color:#cfe0ff;border-color:var(--stroke);}
.shareBtn.alt:hover{background:rgba(255,255,255,.15);}
.shareMsg{min-height:18px;margin-top:7px;font-size:12px;color:#7ee0ff;}
@media (max-width:400px){ .shareBtn{font-size:12.5px;padding:11px 6px;} }

.deadMenu{background:rgba(255,255,255,.08);border:1px solid var(--stroke);color:#c9d4f2;
  font-size:14px;font-weight:600;}
.deadMenu:hover{background:rgba(255,255,255,.14);}

/* 본문 사이 광고 자리 — 게임 화면이 아니라 이 영역에만 넣는다.
   애드센스 규정: 광고는 클릭 요소(버튼·링크)에서 150px 이상 떨어뜨려야 한다. */
.adRow{margin:26px 0 26px;min-height:100px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);border:1px dashed rgba(120,160,255,.22);border-radius:14px;
  color:#5d6b8c;font-size:11.5px;overflow:hidden;}
.adRow .adInner{width:100%;min-height:90px;display:flex;align-items:center;justify-content:center;}
.adRow:empty,.adRow .adInner:empty::before{content:'';}

.pageFoot{text-align:center;padding:170px 0 0;border-top:1px solid rgba(120,160,255,.14);margin-top:8px;}
.footLinks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;margin-bottom:10px;}
.footLinks a{font-size:12px;color:#8ea3cc;text-decoration:none;}
.footLinks a:hover{color:#dfe9ff;text-decoration:underline;}
.footLinks .sep{width:1px;height:9px;background:rgba(140,170,220,.28);}

@media (max-width:1040px){
  /* 좁은 화면: [로고] ... [언어] [햄버거] 를 한 줄에, 메뉴는 그 아래로 펼친다.
     언어 버튼은 메뉴 안에 숨기지 않는다 — 메인화면에서 바로 보여야 한다. */
  .brand{order:1;}
  .langWrap{order:2;margin-left:auto;}
  .navToggle{display:block;order:3;margin:0 0 0 8px;}
  .navLinks{order:4;}
  .navLinks{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;
    margin:8px 0 2px;border-top:1px solid rgba(120,160,255,.14);padding-top:6px;}
  .navLinks.open{display:flex;}
  .navLinks a{padding:9px 6px;font-size:13.5px;}
  .navDiv{display:none;}
  .navTail{margin-top:4px;}
  .navInner{flex-wrap:wrap;padding:10px 14px;}
  .pageBody{padding:16px 12px 56px;}
  .pageSec{padding:20px 18px 16px;border-radius:14px;}
  .pageSec h2{font-size:18px;}
  .pageSec .ctl td{display:block;border-bottom:none;padding:3px 0;}
  .pageSec .ctl td:first-child{width:auto;padding-top:8px;}
  .pageSec .ctl tr{display:block;border-bottom:1px solid rgba(120,160,255,.13);padding-bottom:6px;}
}

/* ---------- 시작 화면 하단: 메뉴 · 언어 · 저작권 ---------- */
.siteMenu{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:16px;
  padding-top:13px;border-top:1px solid rgba(120,160,255,.14);}
.menuLink{background:none;border:none;padding:2px 3px;font-family:inherit;font-size:11.5px;
  color:#8ea3cc;cursor:pointer;text-decoration:none;}
.menuLink:hover{color:#dfe9ff;text-decoration:underline;}
.siteMenu .sep{width:1px;height:9px;background:rgba(140,170,220,.28);}
.langRow{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;
  font-size:11.5px;color:#7f90b5;}

.siteFoot{margin-top:12px;font-size:11px;color:#6e7fa4;line-height:1.6;}
.footCopy{display:block;opacity:.75;}

/* ---------- 게임 안내 팝업 ---------- */
.infoPanel{width:min(680px,95vw);max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;text-align:left;}
.imTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.imTop h2{margin:0;font-size:19px;}
.xBtn{background:none;border:none;color:#8ea3cc;cursor:pointer;padding:4px;display:flex;border-radius:6px;}
.xBtn:hover{color:#fff;background:rgba(255,255,255,.08);}
.imTabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;margin-bottom:12px;
  border-bottom:1px solid rgba(120,160,255,.16);}
.imTab{flex:0 0 auto;padding:8px 12px;border:none;background:none;font-family:inherit;font-size:12.5px;
  font-weight:600;color:#8ea3cc;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.imTab:hover{color:#cfe0ff;}
.imTab.on{color:#fff;border-bottom-color:var(--cyan);}
.imBody{flex:1;overflow-y:auto;padding-right:4px;font-size:13.5px;line-height:1.8;color:#c2cde6;}
.imBody h3{font-size:14.5px;color:#9fd0ff;margin:20px 0 7px;font-weight:700;}
.imBody h3:first-child{margin-top:0;}
.imBody p{margin:0 0 10px;}
.imBody ul{margin:0 0 12px;padding-left:19px;}
.imBody li{margin:4px 0;}
.imBody b{color:#eaf2ff;}
.imBody a{color:var(--cyan);}
.imBody .ctl{width:100%;border-collapse:collapse;margin:0 0 12px;}
.imBody .ctl td{padding:7px 9px;border-bottom:1px solid rgba(120,160,255,.13);vertical-align:top;}
.imBody .ctl td:first-child{width:42%;color:#dfe9ff;font-weight:600;white-space:nowrap;}
.imBody .note{background:rgba(120,160,255,.07);border:1px solid rgba(120,160,255,.16);
  border-radius:10px;padding:12px 14px;margin:0 0 11px;}
.imBody .note h4{margin:2px 0 6px;font-size:13.5px;color:#eaf2ff;font-weight:700;}
.imBody .note p,.imBody .note ul{margin-bottom:0;}
.imBody .noteDate{font-size:11px;color:#7f90b5;letter-spacing:.3px;}
.imBody .mailBig{font-size:16px;font-weight:700;margin:4px 0 14px;}

/* ---------- 채팅 ---------- */
/* 채팅은 게임 중에 거의 쓰지 않는다. 그래서 작게 두었는데 읽히지가 않았다.
   다른 .io 게임들처럼 넓고 진하게, 글씨도 키운다. */
#chatWrap{position:absolute;left:16px;bottom:96px;width:min(430px,52vw);z-index:11;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
#chatLog{width:100%;max-height:230px;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;gap:4px;pointer-events:none;}
#chatLog .cm{font-size:14px;line-height:1.5;color:#e6eeff;background:rgba(8,12,28,.78);
  border-radius:8px;padding:5px 10px;align-self:flex-start;max-width:100%;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  overflow-wrap:anywhere;animation:cmIn .18s ease-out;}
@keyframes cmIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#chatLog .cm .cn{color:#7ee0ff;font-weight:700;margin-right:5px;}
#chatLog .cm.sys{color:#ffc98a;background:rgba(60,34,10,.58);}
#chatForm{display:flex;gap:5px;width:100%;}
/* 글자 크기가 16px보다 작으면 iOS에서 입력할 때 화면이 확대되므로 16px로 둔다 */
#chatInput{flex:1;min-width:0;background:rgba(8,12,28,.86);border:1px solid var(--stroke);
  color:#eaf0ff;border-radius:8px;padding:9px 10px;font-family:inherit;font-size:16px;}
#chatForm button{min-height:40px;}
#chatInput:focus{outline:none;border-color:rgba(120,200,255,.6);}
#chatForm button{background:rgba(120,180,255,.24);border:1px solid var(--stroke);color:#dfe9ff;
  border-radius:8px;padding:0 11px;font-family:inherit;font-size:12px;cursor:pointer;}
#chatToggle{display:inline-flex;align-items:center;gap:5px;width:auto;margin:0;
  background:rgba(8,12,28,.62);border:1px solid var(--stroke);color:#9fb2e6;border-radius:9px;
  padding:9px 13px;min-height:40px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;}
#chatToggle:hover{color:#fff;background:rgba(30,44,86,.8);}
@media (min-width:721px){ #hint{bottom:108px;} }


/* ---------- 게임 포털 임베드 모드 ----------
   CrazyGames·itch.io 같은 포털은 iframe 으로 게임을 싣는다.
   포털 안에서는 (1) 우리 광고 (2) 외부 링크 (3) 본문/푸터를 모두 감춰야 한다.
   포털이 자기 광고를 붙이므로 우리 광고가 같이 나오면 규정 위반이고,
   외부로 나가는 링크도 대부분의 포털이 금지한다. */
html.embedded .siteNav,
html.embedded .pageSec,
html.embedded .pageFoot,
html.embedded .adRow,
html.embedded .scrollCue { display: none !important; }
html.embedded .pageBody { padding: 0; display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh; }
html.embedded .heroPanel { margin: 0 auto; }
html.embedded #start.pageMode { overflow: hidden; }


/* ---------- 관전 모드 ---------- */
.specBtn{background:linear-gradient(90deg,#8ad9ff,#5fe6ff);color:#06122a;}
#specBar{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:14;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:7px 9px;border-radius:12px;max-width:min(660px,94vw);
  background:rgba(8,12,28,.82);border:1px solid var(--stroke);pointer-events:auto;
  box-shadow:0 8px 26px rgba(0,0,0,.5);}
.specModes{display:flex;gap:2px;padding:2px;border-radius:9px;background:rgba(0,0,0,.35);}
.specModes button{min-height:28px !important;padding:0 10px !important;font-size:11.5px !important;
  background:transparent !important;border:none !important;color:#8ea3cc !important;}
.specModes button.on{background:rgba(95,230,255,.24) !important;color:#eaf0ff !important;}
.specNav{display:flex;align-items:center;gap:4px;}
.specActs{display:flex;align-items:center;gap:5px;}
.specMega{font-size:10.5px;font-weight:700;color:#ffd24a;margin-left:4px;white-space:nowrap;}
/* 관전 중에는 조종할 일이 없다 — 조이스틱·부스터를 감춰 화면을 비운다 */
body.spectating #joyZone,body.spectating #boostBtn{display:none !important;}
#specBar button{margin:0;width:auto;min-height:34px;padding:0 12px;border-radius:9px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  background:rgba(120,160,255,.16);border:1px solid var(--stroke);color:#cfe0ff;}
#specBar button:hover{background:rgba(120,180,255,.3);color:#fff;}
#specBar #specPrev,#specBar #specNext{padding:0 10px;font-size:13px;}
#specBar #specWho{font-size:12.5px;font-weight:700;color:#eaf0ff;min-width:96px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
#specBar .specGo{background:linear-gradient(90deg,#5fe6ff,#8ad9ff);color:#06122a;border:none;}
#specBar .specOut{background:rgba(255,255,255,.08);}
/* 관전 중에는 랭킹을 눌러 그 사람 시점으로 넘어갈 수 있다 */
body.spectating #rankList li{cursor:pointer;}
body.spectating #rankList li:hover{background:rgba(120,180,255,.22);border-radius:6px;}
#rankList li.watching{background:rgba(95,230,255,.22);border-radius:6px;}
@media (max-width:560px){
  #specBar{gap:5px;padding:6px 7px;bottom:12px;}
  #specBar button{min-height:28px;padding:0 8px;font-size:11px;}
  .specModes button{min-height:24px !important;padding:0 7px !important;font-size:10.5px !important;}
  #specBar #specWho{font-size:11px;min-width:60px;max-width:92px;}
  .specMega{font-size:9.5px;}
}
/* 모바일 채팅 버튼은 더 작게 — 화면을 덜 가리도록 */
body.touch #chatToggle{padding:5px 8px;min-height:28px;font-size:11px;gap:3px;border-radius:8px;}
body.touch #chatToggle svg{width:13px;height:13px;}

/* 공지 고정글 · 비밀글 · 필터 안내 */
.bdPin{background:rgba(120,190,255,.07);}
.bdPinTag{font-style:normal;font-size:10.5px;font-weight:800;color:#06122a;background:#7fd8ff;
  border-radius:5px;padding:1px 6px;margin-right:7px;vertical-align:1px;}
.bdLock{font-style:normal;margin-right:5px;}
.cmSecret{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#9fb2e6;cursor:pointer;
  margin-right:auto;}
.cmSecret input{width:16px;height:16px;margin:0;accent-color:#5fe6ff;cursor:pointer;}
.cmFilterNote{font-size:11.5px;color:#7f90b5;margin-right:auto;}

/* ── 꾸미기: 스크롤 없이 한 화면에 ──
   넓은 화면에서는 왼쪽에 그림판, 오른쪽에 도구·팔레트·버튼을 놓아 세로 길이를 줄인다. */
/* ── 꾸미기 그리기 탭 ──
   왼쪽 칸(.dmLeft) = 색상(위) + 인게임 예시(아래). 예시는 저장 버튼 줄에 밑변을 맞춘다.
   'left' 영역이 btns 행까지만 걸치므로, 그 안에서 margin-top:auto 로 아래로 밀면 정확히 맞는다. */
@media (min-width: 820px) {
  #dressModal .dressPanel{width:min(96vw,1000px);max-width:none;max-height:94vh;overflow-y:auto;}
  /* 기본 색상 탭일 때는 창 자체를 줄인다 — 넓은 창은 그리기 탭에만 필요하다 */
  #dressModal .dressPanel:has(#tabPreset:not(.hidden)){width:min(94vw,470px);}
  #tabDraw{display:grid;grid-template-columns:264px minmax(0,1fr);
    grid-template-areas:
      'slots slots'
      'left  tools'
      'left  brush'
      'left  canvas'
      'left  btns'
      '.     msg';
    gap:9px 16px;align-items:start;}
  #tabDraw>#slotRow{grid-area:slots;}
  /* 영역 높이를 꽉 채워야 아래쪽 정렬이 먹는다 */
  #tabDraw>.dmLeft {grid-area:left;align-self:stretch;display:flex;flex-direction:column;}
  .dmLeft #palGrid{grid-template-columns:repeat(8,1fr);gap:6px;margin:0;}
  /* margin-top:auto 로 남는 세로 공간을 위로 몰아 예시를 바닥에 붙인다.
     (예전에 :only-of-type 을 붙였는데 형제 div 가 있어 성립하지 않아 그냥 위로 붙었다) */
  .dmLeft .exBox  {margin:0;margin-top:auto;}

  /* 도구·굵기 줄은 왼쪽 색상칸과 윗선을 맞춘다.
     버튼 높이(패딩 8px)가 색상 칸보다 커서 살짝 내려앉아 보였다 → 조금 끌어올린다. */
  #tabDraw>.toolRow  {grid-area:tools;margin:-9px 0 16px;align-self:start;}
  #tabDraw>.brushRow {grid-area:brush;margin:-6px 0 41px;align-self:start;}  /* 그림판과 붙어 오클릭 나지 않게 */
  #tabDraw>.drawArea {grid-area:canvas;margin:0;}
  #tabDraw>.drawArea #drawWrap{width:70%;max-width:none;margin:0 auto;}
  #tabDraw>.dmBtns   {grid-area:btns;margin:0;display:flex;gap:8px;align-self:end;}
  #tabDraw>.dmBtns .dmUse{flex:1;margin:0;}
  #tabDraw>#drawMsg  {grid-area:msg;margin:0;min-height:18px;}
  /* 확인창은 화면 전체를 덮는 고정 위치라, 그리드 배치 대상이 아니다 */
}
/* 모바일 — 세로로 그리기 편한 순서 */
@media (max-width: 819px) {
  #tabDraw{display:flex;flex-direction:column;}
  #tabDraw>#slotRow  {order:1;}
  #tabDraw>.toolRow  {order:2;margin-bottom:12px;}
  #tabDraw>.brushRow {order:3;margin-bottom:24px;}
  #tabDraw>.drawArea {order:4;}
  #tabDraw>.dmLeft   {order:5;}
  #tabDraw>.dmBtns   {order:6;}
  #tabDraw>#drawMsg  {order:7;}
}
/* 예시 — 인게임 모습 한 장 + 경고 */
.exRow{flex-direction:column;align-items:center;gap:0;}
.exCell{width:100%;}
.exCell canvas{max-width:100%;}
.exArrow{display:none;}

/* 프리셋(기본 색상) 첫 화면 */
#tabPreset .skinGrid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px;}

/* 광택 스킨(루비·플라스마) — 칸에 유리 반사 하이라이트 */
.skinCell.glossy::before{content:'';position:absolute;left:8%;top:6%;width:52%;height:34%;
  border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,0));
  pointer-events:none;}

/* 구글 로그인 버튼 강조 — transform 은 쓰지 않는다.
   구글 버튼은 iframe 이라 조상에 transform 이 걸리면 클릭이 안 되거나 잘려 보인다. */
@keyframes gsiRing{0%,100%{box-shadow:0 0 0 0 rgba(95,230,255,.0)}50%{box-shadow:0 0 0 4px rgba(95,230,255,.55)}}
.gsiHi{border-radius:14px;animation:gsiRing 1.3s ease-in-out 2;position:relative;z-index:2;}
/* 구글 로그인 창(One Tap·팝업)이 우리 오버레이에 가리지 않도록 위로 올린다 */
#credential_picker_container,#credential_picker_iframe,
iframe[src*='accounts.google.com'],div[id^='credential_picker']{z-index:2147483647 !important;}

/* 로그인 버튼은 항상 눌리는 크기를 보장한다(모바일에서 구글 버튼이 안 그려지는 일이 있었다) */
.gbtn{width:100%;min-height:46px;font-size:14.5px;}
/* 어떤 규칙보다 우선해 강제로 보이게 한다 — 모바일에서 계속 사라지던 문제 */
body #googleBtn:not(.hidden),body #googleBtn2:not(.hidden){display:flex !important;visibility:visible !important;opacity:1 !important;}

/* 직접 만든 구글 로그인 버튼 */
.gbtn{gap:10px;font-weight:700;letter-spacing:.2px;border-radius:999px;}
.gbtn svg.gicon{flex:none;background:none;width:19px;height:19px;}

/* 로그인 버튼 — 구글 흉내를 내지 않는다. 우리 사이트 버튼임이 분명하게. */
body #googleBtn,body #googleBtn2{
  background:linear-gradient(180deg,rgba(95,230,255,.16),rgba(95,230,255,.07));
  color:#cfeeff;border:1px solid rgba(95,230,255,.42);border-radius:12px;
  gap:9px;font-weight:700;font-size:14px;letter-spacing:.2px;box-shadow:none;}
body #googleBtn:hover,body #googleBtn2:hover{background:rgba(95,230,255,.24);color:#fff;}
body #googleBtn .gkey,body #googleBtn2 .gkey{font-size:15px;}

/* 인앱 브라우저 안내 버튼 — 구글 버튼 자리에 대신 들어간다 */
body .inappBtn{background:linear-gradient(180deg,rgba(255,212,74,.20),rgba(255,180,50,.10));
  color:#ffe6ac;border:1px solid rgba(255,212,74,.48);border-radius:12px;
  width:100%;min-height:46px;display:flex !important;align-items:center;justify-content:center;
  gap:9px;font-weight:700;font-size:14px;}
body .inappBtn:hover{background:rgba(255,212,74,.30);color:#fff;}

/* 사망 화면 — 커뮤니티 구경하기 */
.deadCm{display:block;margin:8px 0 0;padding:11px;border-radius:11px;text-align:center;
  background:rgba(120,190,255,.12);border:1px solid rgba(120,190,255,.30);
  color:#cfe0ff;text-decoration:none;font-size:13.5px;font-weight:700;}
.deadCm:hover{background:rgba(120,190,255,.26);color:#fff;}
html.embedded .deadCm{display:none;}

/* 문서 페이지 본문 */
.docLead{font-size:12.5px !important;color:#7f90b5 !important;}
.docSec h2{margin:30px 0 10px;padding-top:16px;border-top:1px solid rgba(120,160,255,.18);
  font-size:17px;color:#9fd0ff;}
.docSec h2:first-child{margin-top:0;padding-top:0;border-top:none;}
.docSec h3{margin:18px 0 6px;font-size:14.5px;color:#cfe0ff;}
.docSec .note{background:rgba(120,160,255,.07);border:1px solid rgba(120,160,255,.16);
  border-radius:12px;padding:16px 18px;margin:0 0 12px;}
.docSec .note h2{margin:3px 0 7px;padding:0;border:none;font-size:15px;color:#eaf2ff;}
.docSec .noteDate{font-size:11.5px;color:#7f90b5;letter-spacing:.3px;}
.docSec .mailBig{font-size:17px;font-weight:700;margin:6px 0 16px;}

/* 관전 중 신고 버튼 */
.specRep{background:rgba(255,120,120,.16) !important;border:1px solid rgba(255,140,140,.42) !important;
  color:#ffc0c0 !important;}
.specRep:hover{background:rgba(255,120,120,.32) !important;color:#fff !important;}

/* 설정 — 조작 방식 고르기 (데스크톱 전용) */
.ctrlPick{display:inline-flex;gap:5px;}
.ctrlBtn{background:rgba(120,160,255,.10);border:1px solid rgba(120,160,255,.24);color:#9fb2e6;
  border-radius:8px;padding:6px 14px;margin:0;width:auto;font-family:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;}
.ctrlBtn.on{background:rgba(120,190,255,.28);border-color:rgba(120,200,255,.55);color:#fff;}
.ctrlBtn:hover{color:#fff;}
body.touch .pcOnlyRow{display:none;}

/* 시상대 — 점수 위에 그 사람이 탔던 우주선, 그 아래 국기+이름 */
.podShip{width:100%;max-width:86px;margin:0 auto 4px;display:flex;justify-content:center;min-height:28px;}
.podShip canvas{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));}
.pod.first .podShip{max-width:104px;}
.podName{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;}
.podName .podFlag{flex:none;}
.podName .pnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 커뮤니티 랭킹 1·2·3위 — 우주선 그림을 앞에 */
.rkList li.rkTop3{align-items:center;gap:9px;padding:8px 0;}
.rkShip{flex:none;width:46px;display:flex;align-items:center;justify-content:center;}
.rkShip canvas{width:46px;height:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));}
/* 월드레코드 카드·줄에 들어가는 우주선 */
.wrCard .wrShip{width:96px;margin:6px auto 2px;display:flex;justify-content:center;}
.wrCard .wrShip canvas{width:96px;height:auto;display:block;
  filter:drop-shadow(0 3px 10px rgba(255,212,121,.35));}
/* 카드의 주인공. paintPodShips 가 이 칸의 clientWidth 로 캔버스를 그리므로
   여기 폭을 바꾸면 그려지는 해상도도 같이 따라온다. */
.wrLi .wrShip{flex:none;width:150px;max-width:150px;margin:0;min-height:0;}
.wrLi .wrShip canvas{width:150px;height:auto;display:block;
  filter:drop-shadow(0 2px 7px rgba(255,212,121,.4));}
@media(max-width:640px){
  .wrLi .wrShip{width:108px;max-width:108px;}
  .wrLi .wrShip canvas{width:108px;}
}
@media(max-width:420px){
  .wrLi .wrShip{width:86px;max-width:86px;}
  .wrLi .wrShip canvas{width:86px;}
}
.rkList li.rkTop3 .rkName{font-weight:700;}

/* ── 포털(iframe) 안에서 감출 것들 ──
   포털은 자기 사이트 안에 게임을 끼워 넣으므로, 우리 사이트 밖으로 나가는 링크와
   우리 광고는 모두 규정 위반이 된다. 게임 자체만 남기고 전부 감춘다.
   ※ .siteNav · .pageSec · .adRow 는 위쪽에서 이미 감추고 있다. 여기는 그 밖의 것들. */
html.embedded .pawStrip,          /* 기부 안내 띠 — /donate 로 나가는 링크 */
html.embedded #shareRow,          /* 사망 화면 공유 버튼 — 외부 공유 주소를 만든다 */
html.embedded #deadCommunity,     /* 사망 화면 커뮤니티 링크 */
html.embedded .navPaw,
html.embedded .navCm { display: none !important; }

/* 포털 안에서는 로그인·꾸미기를 쓸 수 없다(구글이 iframe 로그인을 막는다).
   빈 칸이 남으면 오히려 고장난 것처럼 보이므로 자리째 없앤다. */
html.embedded #gsiBtn, html.embedded #googleBtn,
html.embedded #dressUp, html.embedded #dressTease,
html.embedded #authState, html.embedded #deadLogin { display: none !important; }
/* 남은 요소만으로 간격이 어색하지 않게 */
html.embedded .heroPanel #nameInput { margin-bottom: 14px; }

/* ── 시상대 재배치 ──
   이름(위) → 우주선 → 점수 → 시상대 블록(순위 숫자 + 국기)
   국기를 이름 옆에 두면 글씨 크기와 안 맞아 어색했다. 1·2·3 아래 남는 자리로 옮긴다. */
.pod .podName{
  display:block;                     /* 국기를 뺐으니 가로 배치가 필요 없다 */
  margin-bottom:5px;
  line-height:1.25;
  /* 이름은 잘리지 않게 두 줄까지 보여 준다(말줄임 없음) */
  overflow:visible;
}
.pod .podName .pnm{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;white-space:normal;word-break:break-word;
  text-overflow:clip;max-width:100%;
}
/* 시상대 블록 — 순위 숫자 아래 남는 공간에 국기 */
.pod .podBlock{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:5px;padding-top:6px;}
.pod .podBlock .podFlag{
  width:26px;height:18px;flex:none;border-radius:3px;overflow:hidden;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 2px 5px rgba(0,0,0,.4);}
.pod.first .podBlock .podFlag{width:31px;height:21px;}
@media(max-width:520px){
  .pod .podBlock .podFlag{width:20px;height:14px;}
  .pod.first .podBlock .podFlag{width:24px;height:17px;}
}

/* 설치형 웹앱 버튼 — 꾸미기(.dressBtn)와 같은 금빛 계열로 맞춘다.
   시작 버튼보다는 한 단계 작게 두어 '주된 행동'을 흐리지 않게. */
.installBtn{display:block;width:100%;margin-top:9px;padding:10px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:800;color:#0d1226;border:none;
  background:linear-gradient(135deg,#ffd479,#ff9f5a);
  box-shadow:0 3px 14px rgba(255,180,90,.3);
  transition:filter .12s,transform .12s;}
.installBtn:hover{filter:brightness(1.08);transform:translateY(-1px);}
/* iOS 는 설치창을 띄울 수 없어 안내문 역할만 한다 — 누를 수 있는 것처럼 보이지 않게 */
.installBtn.hintOnly{background:rgba(255,212,121,.10);color:#ffd479;cursor:default;
  border:1px dashed rgba(255,212,121,.42);box-shadow:none;font-weight:700;}
.installBtn.hintOnly:hover{filter:none;transform:none;}

/* ── 기부 페이지: 숫자 카드와 보호소 찾기 ── */
.figGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0 12px;}
.figCard{background:rgba(120,160,255,.08);border:1px solid rgba(120,160,255,.18);border-radius:12px;
  padding:14px 10px;text-align:center;}
.figCard b{display:block;font-size:26px;font-weight:800;color:#ffd479;letter-spacing:-.5px;line-height:1.2;}
.figCard span{display:block;margin-top:5px;font-size:12.5px;color:#a9b7d6;line-height:1.5;}
.figSrc{font-size:12px;color:#8595b8;margin:8px 0 0;}
.figSrc a{color:#9fd0ff;}

.findBar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:14px 0 10px;}
.findKinds{display:flex;gap:6px;}
.findKind{background:rgba(120,160,255,.10);border:1px solid rgba(120,160,255,.22);color:#c2cde6;
  border-radius:999px;padding:8px 14px;font-size:13.5px;font-family:inherit;cursor:pointer;}
.findKind.on{background:rgba(255,196,80,.16);border-color:rgba(255,196,80,.45);color:#ffd479;font-weight:700;}
.findRegionWrap{display:flex;align-items:center;gap:8px;font-size:13px;color:#a9b7d6;}
.findRegion{background:#0d1226;border:1px solid var(--stroke);color:#eaf0ff;border-radius:9px;
  padding:8px 10px;font-family:inherit;font-size:13.5px;max-width:190px;}
.findWhere{font-size:13px;color:#9fd0ff;margin:0 0 10px;}
.findMap{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  border:1px solid rgba(120,160,255,.2);background:#0a0e1f;}
.findMap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.findActs{margin:12px 0 4px;}
.findLinks{margin:0 0 8px;padding-left:20px;}
.findLinks li{font-size:13.5px;line-height:1.9;color:#c2cde6;}
@media(max-width:520px){
  .findBar{flex-direction:column;align-items:stretch;}
  .findRegionWrap{justify-content:space-between;}
  .findRegion{max-width:none;flex:1;}
  .figCard b{font-size:22px;}
  .findMap{aspect-ratio:4/3;}
}

/* ── 커뮤니티 이용 안내 (이용자가 올리는 공간이라 규칙을 위에 둔다) ── */
.cmRules{background:rgba(255,196,80,.07);border:1px solid rgba(255,196,80,.28);
  border-radius:14px;padding:16px 18px;margin:0 0 16px;}
.cmRules h2{margin:0 0 8px;font-size:16px;color:#ffd479;}
.cmRules p{margin:0 0 8px;font-size:13.5px;line-height:1.8;color:#c9d4f2;}
.cmRules ul{margin:0 0 10px;padding-left:20px;}
.cmRules li{font-size:13px;line-height:1.85;color:#b9c6e4;}
.cmRulesNote{font-size:12.5px !important;color:#a4b2d2 !important;margin:0 !important;}
.cmRulesNote b{color:#ffd479;}
@media(max-width:520px){ .cmRules{padding:13px 14px;} .cmRules h2{font-size:15px;} }

/* ── 기부 페이지: 입양 안내 ── */
.adoptSteps{margin:10px 0 14px;padding-left:22px;}
.adoptSteps li{font-size:13.5px;line-height:1.9;color:#c2cde6;margin:0 0 9px;}
.adoptSteps li b{color:#ffd479;font-weight:700;}
.adoptThink{margin:8px 0 12px;padding-left:20px;}
.adoptThink li{font-size:13.5px;line-height:1.9;color:#c2cde6;margin:4px 0;}
.adoptWarn{background:rgba(126,224,255,.08);border:1px solid rgba(126,224,255,.22);
  border-radius:11px;padding:12px 14px;font-size:13.5px;line-height:1.8;color:#c9d4f2;margin:10px 0 0;}
.adoptWarn b{color:#7ee0ff;}