/* PRIMAL: 숯·황토·붉은 흙 동굴벽화 톤 (케케 브랜드와 다른 디자인) */
:root{--char:#1b1410;--stone:#2e241d;--stone2:#45372c;--ochre:#d08a3c;--ochre2:#f0b45c;--red:#a8341f;--bone:#efe3c8;--f:var(--kp-font,'KekeFont',system-ui,sans-serif)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:var(--char);font-family:var(--f);color:var(--bone);overscroll-behavior:none;touch-action:none;font-synthesis:none}
button,input{font-family:var(--f);color:inherit;border:0;background:none;padding:0;font-size:inherit}
[hidden]{display:none!important}
svg{width:24px;height:24px}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#touch{position:fixed;inset:0;z-index:2;touch-action:none}
body:not(.playing) #touch,body:not(.playing) #tl,body:not(.playing) #br,body:not(.playing) #chat,body:not(.playing) #tr #clock,body:not(.playing) #bHelp{display:none}
#vign{position:fixed;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.55);transition:box-shadow .4s}
#vign.hurt{box-shadow:inset 0 0 160px rgba(160,20,0,.75)}
#vign.starve{box-shadow:inset 0 0 180px rgba(60,20,0,.85)}
#vign.cold{box-shadow:inset 0 0 160px rgba(120,170,230,.6)}
/* 돌판 */
.stone,.slab,.ib,.sb{background:linear-gradient(160deg,var(--stone2),var(--stone));border:2px solid #5c4a3a;box-shadow:0 3px 0 #0e0a08,inset 0 1px 0 rgba(255,230,190,.12)}
.ib{width:44px;height:44px;border-radius:14px 16px 12px 15px;display:grid;place-items:center;color:var(--bone);font-size:20px;cursor:pointer}
.ib:active,.sb:active{transform:translateY(2px);box-shadow:0 1px 0 #0e0a08}
#tr{position:fixed;z-index:20;right:calc(10px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));display:flex;gap:8px;align-items:center}
#clock{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
#tl{position:fixed;z-index:20;left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:6px;pointer-events:none}
#stats{display:flex;flex-direction:column;gap:5px;padding:7px 10px;border-radius:12px;background:rgba(20,14,10,.55);backdrop-filter:blur(4px)}
#hearts{display:flex;gap:2px}#hearts svg{width:20px;height:20px}
.bar{display:flex;align-items:center;gap:6px}.bar svg{width:18px;height:18px}
#foodB{color:#d07040}#warmB{color:#f0a030}
.bar i{display:block;width:96px;height:9px;border-radius:5px;background:rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,230,190,.2)}
.bar i b{display:block;height:100%;width:50%;background:linear-gradient(90deg,#a8341f,#e0703a);transition:width .4s}
#warmB i b{background:linear-gradient(90deg,#4a7ab8,#f0a030)}
.bar.low i b{animation:blink 1.2s infinite}@keyframes blink{50%{opacity:.35}}
#inv{display:flex;flex-wrap:wrap;gap:4px;max-width:190px}
#inv span{display:inline-flex;align-items:center;gap:2px;padding:2px 6px 2px 3px;border-radius:9px;background:rgba(20,14,10,.6);font-size:14px;font-weight:700;min-width:44px}
#inv span svg{width:20px;height:20px}#inv span.z{opacity:.4}#inv span.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.35);background:rgba(208,138,60,.8)}}
/* 오른쪽 아래 버튼 */
#br{position:fixed;z-index:20;right:calc(12px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:10px}
#smalls{display:grid;grid-template-columns:repeat(2,56px);gap:8px}
.sb{position:relative;width:56px;height:56px;border-radius:16px 14px 18px 13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--bone);cursor:pointer}
.sb svg{width:28px;height:28px}.sb small{font-size:13px;font-weight:700;line-height:1}
.sb .ring{position:absolute;inset:-4px;width:64px;height:64px;transform:rotate(-90deg);pointer-events:none;display:none}
.sb .ring circle{fill:none;stroke:var(--ochre2);stroke-width:4;stroke-dasharray:113;stroke-dashoffset:113;stroke-linecap:round}
#bFire.rub .ring{display:block}#bFire.rub{animation:shake .15s infinite}
@keyframes shake{50%{transform:translate(1px,-1px) rotate(-3deg)}}
#bigs{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.pair{display:flex;align-items:flex-end;gap:8px}
#act{width:84px;height:84px;background:radial-gradient(circle at 40% 35%,#f2d48a,#b8862a 70%,#6a4a12)!important;}
#gath{width:84px;height:84px;background:radial-gradient(circle at 40% 35%,#a8d07a,#4a7a2a 70%,#24400e)!important;}
#act,#gath,#hunt{width:84px;height:84px;border-radius:46% 54% 50% 50%/52% 48% 52% 48%;background:radial-gradient(circle at 40% 35%,#e7a24e,#a85a22 70%,#6a3412);border:3px solid #2a1608;box-shadow:0 5px 0 #1a0e06,inset 0 2px 0 rgba(255,240,200,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#2a1608;cursor:pointer}
#act:active,#gath:active,#hunt:active{transform:translateY(3px);box-shadow:0 2px 0 #1a0e06}
#hunt{width:112px!important;height:112px!important}
#act b,#gath b,#hunt b{font-size:15px;font-weight:700;margin-top:2px}#act svg,#gath svg{width:36px;height:36px}#hunt svg{width:48px;height:48px}
#act svg{width:48px;height:48px}#act b{font-size:16px;font-weight:700;margin-top:2px}
#hunt.busy,#gath.busy{animation:pulse 1s infinite}
#hunt.hungry{animation:hpulse .8s infinite;background:radial-gradient(circle at 40% 35%,#f07a4a,#b8341f 70%,#6a1a08)}@keyframes hpulse{50%{transform:scale(1.07);filter:brightness(1.2)}}@keyframes pulse{50%{filter:brightness(1.25)}}
/* 채팅 */
#chat{position:fixed;z-index:15;left:calc(8px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:min(58vw,330px)}
#chatL{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;pointer-events:none}
#chatL li{font-size:14px;padding:3px 9px;border-radius:9px;background:rgba(20,14,10,.62);line-height:1.35;animation:fade 12s forwards}
#chatL li b{color:var(--ochre2);margin-right:5px}@keyframes fade{85%{opacity:1}100%{opacity:0}}
#chatRow{display:flex;gap:6px}#chatBox{display:none;flex-direction:column;gap:6px}#chat.open #chatBox{display:flex}#chat.open #chatRow{display:none}#chatF{display:flex;gap:6px}
#chatI{width:min(52vw,260px);height:44px;padding:0 12px;border-radius:12px;background:rgba(20,14,10,.85);border:2px solid #5c4a3a;font-size:16px;user-select:text;-webkit-user-select:text}
#chatB{width:44px;height:44px;border-radius:12px;background:var(--ochre);color:var(--char);display:grid;place-items:center}
/* 판(제작·동작) */
.slab{position:fixed;z-index:30;right:calc(12px + env(safe-area-inset-right));bottom:calc(140px + env(safe-area-inset-bottom));padding:12px;border-radius:16px;min-width:250px;max-width:calc(100vw - 24px)}
.slab h3{margin:0 0 8px;font-size:17px;color:var(--ochre2)}
.rc{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:6px;border-radius:12px;background:rgba(0,0,0,.25);width:100%;text-align:left;cursor:pointer}
.rc svg{width:30px;height:30px;flex:none}.rc .nm{flex:1;font-size:15px;font-weight:700}.rc .cost{display:flex;gap:3px;font-size:13px;align-items:center}.rc .cost svg{width:17px;height:17px}
.rc.off{opacity:.45}.rc.own{opacity:.6}.rc.own .nm::after{content:' ✓';color:#8fd06a}
#emoteL{display:grid;grid-template-columns:repeat(3,72px);gap:8px}
#emoteL button{height:64px;border-radius:12px;background:rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;font-weight:700}
#emoteL svg{width:28px;height:28px}
/* 벽화 그리기 */
#paint{position:fixed;inset:0;z-index:40;background:#0c0806;display:flex;flex-direction:column}
#pwrap{flex:1;display:grid;place-items:center;padding:calc(8px + env(safe-area-inset-top)) 8px 0;min-height:0}
#pc{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 0 0 2px #3a2c22,0 10px 40px rgba(0,0,0,.6);touch-action:none;cursor:crosshair}
#ptools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;padding:10px 10px calc(12px + env(safe-area-inset-bottom))}
#ptools>div{display:flex;gap:6px;align-items:center}
#pcol button{width:40px;height:40px;border-radius:50%;border:3px solid #2a1e16}
#pcol button.on,#pkind button.on,#psize button.on{outline:3px solid var(--ochre2);outline-offset:2px}
#pkind button,#psize button{width:44px;height:44px;border-radius:12px;background:var(--stone2);display:grid;place-items:center}
#pkind svg{width:30px;height:30px}
#psize i{display:block;border-radius:50%;background:var(--bone)}
/* 메뉴 */
.screen{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:calc(40px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(12,8,6,.55),rgba(12,8,6,0) 40%,rgba(12,8,6,0) 55%,rgba(12,8,6,.85))}
.logo{text-align:center}
.logo h1{margin:0;font-size:clamp(58px,17vw,104px);font-weight:700;letter-spacing:.12em;color:var(--ochre);text-shadow:3px 3px 0 #3a1a08,0 0 30px rgba(240,140,40,.35);line-height:1}
.logo p{margin:6px 0 0;font-size:18px;color:var(--bone);letter-spacing:.3em;text-shadow:0 2px 6px #000}
.mbot{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(340px,100%)}
.pick{display:flex;align-items:center;gap:12px}.pick b{min-width:120px;text-align:center;font-size:20px;text-shadow:0 2px 6px #000}
#nameI{width:100%;height:50px;border-radius:14px;padding:0 14px;text-align:center;font-size:19px;background:rgba(20,14,10,.8);border:2px solid #5c4a3a;user-select:text;-webkit-user-select:text}
.bigs{width:100%;height:64px;border-radius:30px 34px 28px 32px;background:radial-gradient(circle at 40% 30%,#e7a24e,#a85a22 75%);border:3px solid #2a1608;box-shadow:0 5px 0 #1a0e06;color:#2a1608;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.bigs svg{width:30px;height:30px}.bigs:active{transform:translateY(3px);box-shadow:0 2px 0 #1a0e06}
.lnk{font-size:15px;color:var(--bone);opacity:.75;text-decoration:none;padding:6px 10px}
.lnk.more{font-size:13px;opacity:.5}
/* 온보딩 */
#onb{position:fixed;z-index:35;left:50%;top:calc(110px + env(safe-area-inset-top));transform:translateX(-50%);width:min(340px,calc(100vw - 32px));padding:12px 14px;border-radius:16px;background:rgba(20,14,10,.88);border:2px solid var(--ochre);text-align:center;pointer-events:auto}
#onb p{margin:0 0 8px;font-size:17px;font-weight:700;line-height:1.4}
#onb .row{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.85}
#onbSkip{padding:6px 10px;border-radius:10px;background:var(--stone2);font-size:13px}
.hand{position:fixed;z-index:36;width:56px;height:56px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 30V10a5 5 0 0 1 10 0v16l3-1a5 5 0 0 1 6 3l1 2 2-1a5 5 0 0 1 6 4v12c0 9-7 16-16 16h-4c-6 0-10-3-13-8l-8-13a5 5 0 0 1 8-6l5 6z' fill='%23efe3c8' stroke='%231b1410' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));animation:press 1.3s ease-in-out infinite;margin:-6px 0 0 -18px}
@keyframes press{0%,100%{transform:translateY(0)}35%,75%{transform:translateY(12px) scale(.88)}}
/* 알림 */
#toast{position:fixed;z-index:45;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translate(-50%,10px);padding:9px 16px;border-radius:14px;background:rgba(20,14,10,.9);border:2px solid #5c4a3a;font-size:16px;font-weight:700;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
#toast.on{opacity:1;transform:translate(-50%,0)}
#ann{position:fixed;z-index:44;left:50%;top:32%;transform:translateX(-50%);font-size:clamp(24px,7vw,40px);font-weight:700;color:var(--ochre2);text-shadow:3px 3px 0 #3a1a08,0 0 20px #000;opacity:0;transition:opacity .4s;pointer-events:none;text-align:center;white-space:nowrap}
#ann.on{opacity:1}
#ko{position:fixed;inset:0;z-index:48;background:rgba(0,0,0,.85);display:grid;place-items:center;font-size:28px;color:var(--bone);animation:kofade .8s}
@keyframes kofade{from{opacity:0}}
#conn{position:fixed;z-index:46;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:12px;background:rgba(20,14,10,.8);font-size:14px}
#qa{position:fixed;z-index:99;left:4px;top:120px;font-size:11px;background:rgba(0,0,0,.6);color:#9f9;padding:4px;max-width:60vw;white-space:pre-wrap;pointer-events:none}
#load{position:fixed;inset:0;z-index:60;background:var(--char);display:grid;place-items:center}
.spin{width:46px;height:46px;border-radius:50%;border:4px solid #3a2c22;border-top-color:var(--ochre);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:380px){#hunt{width:96px!important;height:96px!important}#act,#gath{width:72px;height:72px}#smalls{grid-template-columns:repeat(2,48px)!important}.sb{width:48px!important;height:48px!important}#smalls{grid-template-columns:repeat(2,52px)}.sb{width:52px;height:52px}.bar i{width:78px}}

/* 레벨·조개·의뢰 */
#lvRow{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:10px;background:rgba(20,14,10,.55)}
#lvB{font-size:14px;color:var(--ochre2);min-width:38px}
#xpB{display:block;width:70px;height:7px;border-radius:4px;background:rgba(0,0,0,.5);overflow:hidden}#xpB b{display:block;height:100%;width:0;background:linear-gradient(90deg,#d08a3c,#f0d060);transition:width .4s}
#shellB{display:inline-flex;align-items:center;gap:3px;font-size:15px;font-weight:700;color:#f2e6cc}#shellB svg{width:20px;height:20px}#shellB.pop{animation:pop .5s}
#quests{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;max-width:200px}
#quests li{font-size:13px;padding:3px 8px;border-radius:9px;background:rgba(20,14,10,.6);display:flex;justify-content:space-between;gap:8px;line-height:1.3}
#quests li b{color:var(--ochre2);font-variant-numeric:tabular-nums}#quests li.done{background:rgba(120,90,20,.8)}
/* 큰 판(장터·도감) */
.slab.big{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 24px));max-height:min(78vh,620px);display:flex;flex-direction:column}
.tabs{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.tabs button{padding:7px 12px;border-radius:10px;background:rgba(0,0,0,.25);font-size:15px;font-weight:700}.tabs button.on{background:var(--ochre);color:var(--char)}
.tabs .x{margin-left:auto;width:36px;height:36px;padding:0;font-size:22px}.tabs b{font-size:16px;color:var(--ochre2)}
#shopL,#dexL{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.row2{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:5px;border-radius:11px;background:rgba(0,0,0,.25)}
.row2 svg{width:28px;height:28px;flex:none}.row2 .nm{flex:1;font-size:15px;font-weight:700}.row2 .nm small{display:block;font-size:12px;opacity:.75;font-weight:500}
.row2 button{min-width:64px;height:38px;border-radius:10px;background:var(--ochre);color:var(--char);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:3px}
.row2 button svg{width:16px;height:16px}.row2 button.off{opacity:.4}.row2 button.alt{background:var(--stone2);color:var(--bone)}
#dexL{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#dexL span{font-size:13px;padding:6px 4px;border-radius:8px;background:rgba(0,0,0,.3);text-align:center;opacity:.35}#dexL span.on{opacity:1;background:rgba(208,138,60,.35)}
#dexL h4{grid-column:1/-1;margin:6px 0 0;font-size:14px;color:var(--ochre2)}
#panelEmote{max-height:min(60vh,460px);overflow-y:auto;touch-action:pan-y}
#toolL{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}#toolL button{height:44px;padding:0 10px;border-radius:10px;background:rgba(208,138,60,.35);display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700}#toolL svg{width:24px;height:24px}
#emoteL{grid-template-columns:repeat(4,64px)!important}
@media (max-width:380px){#emoteL{grid-template-columns:repeat(3,64px)!important}}
@media (max-width:440px){#chat{bottom:calc(150px + env(safe-area-inset-bottom))}}

/* 모두 취소 */
#bCancel{height:44px;padding:0 14px 0 10px;border-radius:22px;background:#3a1a12;border:2px solid #a8341f;color:#ffd8c8;display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:700;box-shadow:0 3px 0 #0e0a08}
#bCancel svg{width:20px;height:20px}#bCancel:active{transform:translateY(2px)}
/* 연속 동작 */
#seqBar{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,230,190,.15)}
#seqRec{align-self:flex-start;height:38px;padding:0 12px;border-radius:10px;background:rgba(0,0,0,.3);font-size:14px;font-weight:700}#seqRec.on{background:#a8341f;color:#fff}
#seqChips{display:flex;flex-wrap:wrap;gap:4px;min-height:26px}#seqChips span{font-size:13px;padding:3px 8px;border-radius:8px;background:rgba(208,138,60,.35);cursor:pointer}#seqChips span.cur{background:var(--ochre);color:var(--char)}#seqChips em{font-size:13px;opacity:.6;font-style:normal}
.seqCtl{display:flex;gap:6px}.seqCtl button{height:38px;min-width:44px;padding:0 10px;border-radius:10px;background:rgba(0,0,0,.3);font-size:15px;font-weight:700}
#seqPlay{background:var(--ochre)!important;color:var(--char)}#seqPlay.off{opacity:.4}#seqLoop.on{background:rgba(208,138,60,.5)!important}

/* 채팅: 빠른 말·외치기·기록 */
#quick{display:flex;flex-wrap:wrap;gap:5px;max-width:min(92vw,360px)}
#quick button{height:36px;padding:0 11px;border-radius:18px;background:rgba(20,14,10,.85);border:2px solid #5c4a3a;font-size:14px;font-weight:700}
#quick button:active{background:var(--ochre);color:var(--char)}
#chatSh{width:44px;height:44px;border-radius:12px;background:rgba(20,14,10,.85);border:2px solid #5c4a3a;display:grid;place-items:center}#chatSh.on{background:#a8341f;border-color:#f0b45c}
#chatL li.sh{background:rgba(168,52,31,.75)}#chatL li.sys{opacity:.75;font-size:13px}#chatL li.me b{color:#9fd07a}
#logL{list-style:none;margin:0;padding:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;touch-action:pan-y}#logL li{font-size:14px;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.25)}#logL li b{color:var(--ochre2);margin-right:5px}#logL li.sh{background:rgba(168,52,31,.45)}
#chatL li{animation:fade 20s forwards}
/* 기절 이유 */
#ko .kobox{text-align:center;padding:20px;max-width:340px}
#ko b{display:block;font-size:30px;margin-bottom:12px}#koWhy{font-size:20px;color:#f0b45c;margin:0 0 10px}#koTip{font-size:16px;margin:0 0 10px;line-height:1.5}#koLost{font-size:14px;opacity:.75}
@media (max-width:440px){#toast{bottom:calc(330px + env(safe-area-inset-bottom))}}

.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chips button{height:34px;padding:0 12px;border-radius:17px;background:rgba(0,0,0,.3);font-size:14px;font-weight:700}.chips button.on{background:var(--ochre);color:var(--char)}
.row2 .tier{width:10px;height:28px;border-radius:5px;flex:none}
.row2.lux{background:linear-gradient(90deg,rgba(255,200,60,.22),rgba(0,0,0,.25));box-shadow:inset 0 0 0 1px rgba(255,200,60,.45)}
.tabs{flex-wrap:wrap}

#digBar{position:fixed;z-index:30;left:50%;top:calc(80px + env(safe-area-inset-top));transform:translateX(-50%);width:min(320px,80vw);padding:8px 12px;border-radius:14px;background:rgba(20,14,10,.85);border:2px solid #8a7e72;text-align:center;font-size:15px;font-weight:700}
#digB{display:block;height:12px;margin-top:6px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden}#digB b{display:block;height:100%;width:0;background:linear-gradient(90deg,#6a5e54,#c8b898);transition:width .3s}

.sex{display:flex;gap:8px}.sex button{height:40px;padding:0 20px;border-radius:20px;background:rgba(20,14,10,.75);border:2px solid #5c4a3a;font-size:17px;font-weight:700}.sex button.on{background:var(--ochre);color:var(--char);border-color:var(--ochre2)}
.gsum{font-size:14px;font-weight:700;color:var(--ochre2);margin-bottom:8px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.3)}