/* v0.66 · The emote wheel, its library and the chat's emoji picker. Same ink / slate / ivory / gold pixel palette
   and Ruin Script face as the rest of the game; each mood has its own colour (funny amber, cool blue, cute pink,
   legendary gold). Everything is scoped to #emoteWheel, .ewStudio, #chatEmojiPop and .chatEmoji. */
:root{--ew-funny:#ffa94d;--ew-cool:#63b3ff;--ew-cute:#ff8fbf;--ew-legend:#f5d36b}

/* ------------------------------------------------------------------ the wheel */
#emoteWheel{position:fixed;inset:0;z-index:45;pointer-events:none;--ewc:#ecc25a}
#emoteWheel[hidden]{display:none!important}
#emoteWheel .ewVeil{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#0e0b1700 120px,#0e0b1766 260px,#0e0b17b8 70%);opacity:0;transition:opacity .14s}
#emoteWheel.in .ewVeil{opacity:1}
#emoteWheel.pinned .ewVeil{pointer-events:auto;cursor:default}
#emoteWheel .ewDial{position:absolute;left:50%;top:50%;width:var(--sz);height:var(--sz);margin:calc(var(--sz)/-2) 0 0 calc(var(--sz)/-2);pointer-events:auto;transform:scale(.86);opacity:0;transition:transform .16s cubic-bezier(.2,1.5,.4,1),opacity .12s}
#emoteWheel.in .ewDial{transform:scale(1);opacity:1}
#emoteWheel .ewRing{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#emoteWheel .ewRing stop{stop-color:var(--ewc)}
#emoteWheel .ewHalo{fill:none;stroke:#ecc25a2e;stroke-width:1;stroke-dasharray:2 6}
#emoteWheel .ewWedge{fill:#0e0b17d9;stroke:#323a5c;stroke-width:1.5;transition:fill .1s,stroke .1s}
#emoteWheel .ewWedge.hot{fill:color-mix(in srgb,var(--ewc) 20%,#0e0b17f0);stroke:var(--ewc)}
#emoteWheel .ewRim{fill:none;stroke:transparent;stroke-width:5;stroke-linecap:butt;transition:stroke .1s}
#emoteWheel .ewRim.hot{stroke:var(--ewc);filter:drop-shadow(0 0 6px var(--ewc))}
#emoteWheel .ewInner{fill:#0e0b17f2;stroke:#ecc25a55;stroke-width:1.5}
#emoteWheel .ewSlot{position:absolute;width:96px;height:112px;margin:-60px 0 0 -48px;padding:0!important;border:0!important;border-image:none!important;background:none!important;border-radius:0;cursor:pointer;transition:transform .12s;filter:drop-shadow(0 2px 0 #0e0b17)}
#emoteWheel .ewSlot:hover{background:none!important}
#emoteWheel .ewSlot canvas{width:96px;height:112px;image-rendering:pixelated;display:block}
#emoteWheel .ewSlot kbd{position:absolute;left:50%;top:-2px;transform:translateX(-50%);font:10px var(--pixel);color:#8e97b8;background:#0e0b17;padding:1px 4px;box-shadow:0 0 0 1px #323a5c}
#emoteWheel .ewSlot em{display:none}
#emoteWheel .ewSlot.hot{transform:scale(1.14);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 70%,transparent)) drop-shadow(0 2px 0 #0e0b17)}
#emoteWheel .ewSlot.hot kbd{color:#0e0b17!important;background:var(--c);box-shadow:0 0 0 1px #0e0b17}
#emoteWheel .ewSlot[data-cat=legendary] canvas{filter:drop-shadow(0 0 4px #f5d36b66)}
#emoteWheel .ewCenter{position:absolute;left:50%;top:50%;width:142px;height:142px;margin:-71px 0 0 -71px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;pointer-events:auto}
#emoteWheel .ewKind{font:9px var(--pixel);letter-spacing:1.6px;color:var(--ewc);text-transform:uppercase}
#emoteWheel .ewName{font:600 20px/1.05 'Cormorant Garamond',Georgia,serif;color:#f2e7c9;max-width:126px;text-shadow:0 2px 0 #0e0b17}
#emoteWheel .ewCat{font:9px var(--pixel);color:#0e0b17;background:var(--ewc);padding:1px 6px;letter-spacing:1px}
#emoteWheel .ewHint{font:9px/1.25 var(--pixel);font-style:normal;color:#8e97b8;max-width:120px;margin-top:2px}
#emoteWheel .ewGear{margin-top:4px;padding:0 4px!important;min-height:0;font:9px var(--pixel);color:#ecc25a;letter-spacing:.5px;line-height:14px}
#emoteWheel .ewGear:hover{color:#fde89a}
@media (max-width:620px){#emoteWheel .ewDial{transform:scale(.72)!important}}
@media (prefers-reduced-motion:reduce){#emoteWheel .ewDial,#emoteWheel .ewVeil{transition:none}}

/* ------------------------------------------------------------------ the library (a modal) */
#modalBox[data-kind=emotes]{max-width:1060px;width:calc(100% - 36px);padding:28px 30px}
.ewStudio .erHead h2{margin:4px 0 6px}
.ewStudio .erHead p{font-size:12px;max-width:640px}
.ewStudio kbd{font:10px var(--pixel);color:#0e0b17;background:#ecc25a;padding:0 4px}
.ewStudioBody{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:26px;margin-top:18px;align-items:start}
.ewMini{display:flex;flex-direction:column;gap:14px;position:sticky;top:0}
.ewMiniRing{position:relative;width:100%;aspect-ratio:1;background:radial-gradient(circle,#171327 0 34%,#0e0b17 35% 61%,#171327 62%);box-shadow:inset 0 0 0 1px #323a5c;border-radius:50%}
#modalBody .ewMiniSlot{position:absolute;width:78px;height:86px;margin:-46px 0 0 -39px;padding:0!important;border:0!important;border-image:none!important;background:#0e0b17!important;border-radius:0;box-shadow:0 0 0 1px #323a5c,0 0 0 3px #0e0b17;overflow:hidden;cursor:pointer;transition:transform .1s,box-shadow .1s}
.ewMiniSlot canvas{width:96px;height:112px;margin:-16px 0 0 -9px;image-rendering:pixelated;display:block;pointer-events:none}
.ewMiniSlot kbd{position:absolute;left:3px;top:3px;font:9px var(--pixel);background:#0e0b17;color:#8e97b8;box-shadow:0 0 0 1px #323a5c;pointer-events:none}
#modalBody .ewMiniSlot:hover{filter:none;background:#171327!important;box-shadow:0 0 0 1px var(--c),0 0 0 3px #0e0b17}
#modalBody .ewMiniSlot.sel{transform:scale(1.08);background:color-mix(in srgb,var(--c) 18%,#0e0b17)!important;box-shadow:0 0 0 2px var(--c),0 0 0 4px #0e0b17,0 0 14px color-mix(in srgb,var(--c) 55%,transparent);z-index:2}
.ewMiniSlot.sel kbd{background:var(--c);color:#0e0b17}
.ewStage{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.ewStage canvas{width:144px;height:168px;image-rendering:pixelated;margin-top:-26px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c,#ecc25a) 30%,transparent))}
.ewStageName{font:600 18px/1.1 'Cormorant Garamond',Georgia,serif;color:#f2e7c9;margin-top:-6px}
.ewStageDesc{font:9px/1.35 var(--pixel);color:#8e97b8;margin-top:3px;max-width:150px;letter-spacing:.3px}
.ewMiniActions{display:flex;gap:10px}.ewMiniActions button{flex:1;padding:10px 12px}
.ewLib{min-width:0}
.ewTabs{display:flex;gap:6px;border-bottom:1px solid #323a5c;margin-bottom:10px}
#modalBody .ewTabs button{border:0!important;border-image:none!important;border-radius:0;padding:9px 14px!important;font:12px var(--pixel);color:#8e97b8;background:none!important;border-bottom:2px solid transparent!important;margin-bottom:-1px}
.ewTabs button b{font-weight:400;color:#5d6890;margin-left:4px}
#modalBody .ewTabs button[aria-selected=true]{color:#f2e7c9;border-bottom-color:#ecc25a!important}
.ewChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#modalBody .ewChips button{padding:5px 10px!important;font:10px var(--pixel);border-radius:0;color:#c9cde0;background:#171327!important;border:1px solid #323a5c!important;border-image:none!important;display:flex;align-items:center;gap:6px}
.ewChips button i{width:7px;height:7px;background:var(--c);box-shadow:0 0 0 1px #0e0b17}
#modalBody .ewChips button.on{color:#0e0b17;background:var(--c,#ecc25a)!important;border-color:var(--c,#ecc25a)!important}
.ewChips button.on i{background:#0e0b17}
.ewGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:min(56vh,520px);overflow:auto;padding:2px 4px 6px 2px;scrollbar-color:#435078 #0e0b17}
#modalBody .ewCard{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 4px 8px!important;background:linear-gradient(170deg,color-mix(in srgb,var(--c) 10%,#171327),#0e0b17)!important;border:1px solid #262a46!important;border-image:none!important;border-radius:0;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--c) 30%,transparent);cursor:pointer;min-width:0}
.ewCard canvas{width:96px;height:112px;image-rendering:pixelated;margin:-10px 0 -12px;pointer-events:none}
.ewCard img{width:48px;height:48px;image-rendering:pixelated;margin:14px 0 10px;pointer-events:none;filter:drop-shadow(0 2px 0 #0e0b17)}
.ewCard b{font:11px/1.15 var(--pixel);color:#f2e7c9;text-align:center;font-weight:400;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ewCard small{font:9px var(--pixel);color:var(--c);letter-spacing:.4px}
.ewCard kbd{position:absolute;right:4px;top:4px;font:9px var(--pixel);background:var(--c);color:#0e0b17;padding:0 4px}
#modalBody .ewCard:hover{filter:none;background:linear-gradient(170deg,color-mix(in srgb,var(--c) 22%,#171327),#0e0b17)!important;border-color:var(--c)!important}
#modalBody .ewCard[aria-selected=true]{border-color:color-mix(in srgb,var(--c) 70%,#262a46)!important}
#modalBody .ewCard[data-cat=legendary]{background:linear-gradient(170deg,#2a2110,#0e0b17 70%)!important;border-color:#5a4720!important}
.ewCard[data-cat=legendary]::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#fff6c81c 50%,transparent 60%);background-size:260% 100%;animation:ewSheen 3.2s linear infinite}
@keyframes ewSheen{from{background-position:130% 0}to{background-position:-130% 0}}
.ewTip{font-size:11px;margin-top:10px;color:#8e97b8}.ewTip b{color:#ecc25a;font-family:var(--pixel);font-weight:400}
@media (max-width:820px){.ewStudioBody{grid-template-columns:1fr}.ewMini{position:static}.ewMiniRing{max-width:360px;margin:auto}}

/* ------------------------------------------------------------------ chat emoji */
.chatEmoji{width:16px;height:16px;image-rendering:pixelated;vertical-align:-4px;margin:0 1px;filter:drop-shadow(1px 1px 0 #0e0b17)}
.chatEmoji.legendary{animation:ewAura 2.2s ease-in-out infinite}
@keyframes ewAura{0%,100%{filter:drop-shadow(1px 1px 0 #0e0b17) drop-shadow(0 0 0 #f5d36b00)}50%{filter:drop-shadow(1px 1px 0 #0e0b17) drop-shadow(0 0 4px #f5d36bcc)}}
.chatToast .chatEmoji{width:16px;height:16px}
#chatEmojiBtn{padding:4px 7px!important;font-size:13px!important;line-height:1;color:#ecc25a}
.chatCompose{position:relative}
#chatEmojiPop{position:absolute;left:4px;right:4px;bottom:calc(100% + 6px);z-index:6;background:#0e0b17f5;border:1px solid #435078;box-shadow:0 10px 30px #0009,0 0 0 1px #0e0b17;padding:6px}
#chatEmojiPop[hidden]{display:none}
#chatEmojiPop .cepTabs{display:flex;gap:3px;margin-bottom:6px}
#chatEmojiPop .cepTabs button{flex:1;padding:4px 2px!important;font:9px var(--pixel);border-radius:0;color:#8e97b8;background:#171327!important;border:1px solid #262a46!important;border-image:none!important}
#chatEmojiPop .cepTabs button.on{color:#0e0b17;background:var(--c)!important;border-color:var(--c)!important}
#chatEmojiPop .cepGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:3px;max-height:150px;overflow:auto}
#chatEmojiPop .cepGrid button{padding:1px!important;border-radius:0;border:1px solid transparent!important;border-image:none!important;background:#171327!important;display:grid;place-items:center;height:34px}
#chatEmojiPop .cepGrid button:hover{filter:none;border-color:#ecc25a!important;background:#262a46!important}
#chatEmojiPop .cepGrid img{width:32px;height:32px;image-rendering:pixelated}
#chatEmojiPop .cepFoot{display:block;margin-top:5px;font:8px var(--pixel);color:#5d6890;letter-spacing:.3px}
/* the game's kbd is gold !important: badges on coloured grounds need their own ink */
#emoteWheel .ewSlot kbd,#modalBody .ewMiniSlot kbd{color:#8e97b8!important;border:0;border-radius:0}
#emoteWheel .ewSlot.hot kbd,#modalBody .ewMiniSlot.sel kbd,#modalBody .ewCard kbd,#modalBody .ewStudio .erHead kbd{color:#0e0b17!important;border:0;border-radius:0}
/* v0.68 · the game sets every canvas to smooth scaling (!important); the wheel's and the library's pixel previews
   must stay crisp. The library also sits on a whole pixel (flex-centring an odd height left it half a pixel off). */
#emoteWheel canvas,#modalBody .ewStudio canvas,#modalBody .ewStudio img,#chatEmojiPop img,.chatEmoji,#chatEmojiBtn img{image-rendering:pixelated!important}
#modal:has(.ewStudio){align-items:flex-start;padding-top:max(12px,calc(50vh - 400px));padding-top:round(down,max(12px,calc(50vh - 400px)),1px)}