/* ==========================================================================
   dice.css — emoji pop + modals + biography like button
   ========================================================================== */

/* Emoji button — appears on top of the dice after roll, awaits user click.
   Mounted inside .bouge (which is position:absolute in the sticky nav, z-index
   999999), positioned absolutely above the dice so it sticks with it. */
.dice-emoji-pop {
   position: absolute;
   left: 50%;
   top: 0;
   transform: translate(-50%, -100%);
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
   padding: 10px 14px 8px;
   background: rgba(255,255,255,0.96);
   border: 1px solid rgba(0,0,0,0.08);
   border-radius: 14px;
   box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
   cursor: pointer;
   z-index: 10;                 /* above .scene.one (999 within .bouge? no — .bouge has no z; siblings decide) */
   font: inherit;
   color: #222;
   animation: dice-emoji-in .36s cubic-bezier(.2,.9,.3,1.15) both;
   transition: transform .18s ease, box-shadow .18s ease;
   user-select: none;
   white-space: nowrap;
}
/* Make sure .bouge doesn't clip the popup that sits above its top edge */
.bouge { overflow: visible; }
.dice-emoji-pop:hover {
   transform: translate(-50%, -108%) scale(1.05);
   box-shadow: 0 12px 32px rgba(0,0,0,0.24), 0 3px 8px rgba(0,0,0,0.1);
}
.dice-emoji-pop:focus-visible {
   outline: 2px solid #3a74d9;
   outline-offset: 3px;
}
.dice-emoji-glyph {
   font-size: 2.4rem;
   line-height: 1;
   display: block;
}
.dice-emoji-hint {
   font-size: 0.72rem;
   color: #666;
   letter-spacing: 0.02em;
}
.dice-emoji-pop.dice-emoji-leaving {
   animation: dice-emoji-out .26s ease-in forwards;
   pointer-events: none;
}
.dice-emoji-pop::after {
   content: "";
   position: absolute;
   left: 50%; bottom: -6px;
   transform: translateX(-50%) rotate(45deg);
   width: 10px; height: 10px;
   background: rgba(255,255,255,0.96);
   border-right: 1px solid rgba(0,0,0,0.08);
   border-bottom: 1px solid rgba(0,0,0,0.08);
}
@keyframes dice-emoji-in {
   0%   { opacity: 0; transform: translate(-50%, -70%) scale(0.7); }
   60%  { opacity: 1; transform: translate(-50%, -106%) scale(1.08); }
   100% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@keyframes dice-emoji-out {
   0%   { opacity: 1; transform: translate(-50%, -100%) scale(1); }
   100% { opacity: 0; transform: translate(-50%, -120%) scale(0.9); }
}

/* Transient "+1" float used after like — also inside .bouge now */
.dice-emoji-float {
   position: absolute;
   transform: translate(-50%, -50%);
   font-size: 2rem;
   line-height: 1;
   pointer-events: none;
   z-index: 10;
   animation: dice-emoji-fly 1.0s cubic-bezier(.2,.8,.3,1) forwards;
   user-select: none;
   color: #3a74d9;
   font-weight: 600;
   filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}
@keyframes dice-emoji-fly {
   0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
   25%  { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
   100% { opacity: 0; transform: translate(-50%, -160%) scale(0.9); }
}

/* Rolling cursor feedback */
body.dice-rolling .bouge { cursor: wait; }

/* Modal overlay */
.dice-modal-overlay {
   position: fixed; inset: 0;
   background: rgba(10,10,10,0.55);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   z-index: 9998;
   display: flex; align-items: center; justify-content: center;
   animation: dice-fade-in .18s ease-out;
   font-family: inherit;
}
@keyframes dice-fade-in { from { opacity: 0 } to { opacity: 1 } }

.dice-modal {
   position: relative;
   background: #fff;
   color: #111;
   width: min(440px, 92vw);
   max-height: 86vh;
   overflow: auto;
   padding: 28px 28px 22px;
   border-radius: 6px;
   box-shadow: 0 14px 48px rgba(0,0,0,0.28);
   animation: dice-pop-in .22s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes dice-pop-in {
   from { transform: translateY(8px) scale(0.97); opacity: 0 }
   to   { transform: translateY(0) scale(1);      opacity: 1 }
}
.dice-modal h3 {
   margin: 0 0 6px;
   font-size: 1.15rem;
   font-weight: 600;
}
.dice-modal .dice-sub {
   margin: 0 0 14px;
   font-size: 0.85rem;
   color: #666;
}
.dice-modal-close {
   position: absolute; top: 6px; right: 10px;
   background: none; border: 0;
   font-size: 1.6rem; line-height: 1;
   color: #999; cursor: pointer;
   padding: 4px 8px;
}
.dice-modal-close:hover { color: #222; }

/* Message form */
.dice-msg-form input,
.dice-msg-form textarea {
   display: block; width: 100%;
   padding: 9px 10px; margin: 6px 0;
   font-family: inherit; font-size: 0.92rem;
   border: 1px solid #ccc; border-radius: 3px;
   background: #fafafa;
   box-sizing: border-box;
}
.dice-msg-form textarea {
   min-height: 110px; resize: vertical;
}
.dice-msg-form input:focus,
.dice-msg-form textarea:focus {
   outline: none; border-color: #666; background: #fff;
}
.dice-msg-actions {
   display: flex; align-items: center; gap: 12px;
   margin-top: 12px;
}
.dice-msg-actions button {
   background: #111; color: #fff;
   border: 0; border-radius: 3px;
   padding: 8px 18px;
   font-family: inherit; font-size: 0.9rem;
   cursor: pointer;
}
.dice-msg-actions button:hover { background: #333; }
.dice-msg-actions .dice-cancel-btn { background: #ddd; color: #222; }
.dice-msg-actions .dice-cancel-btn:hover { background: #ccc; }
.dice-msg-status {
   font-size: 0.82rem; color: #666;
}

/* Share QR */
.dice-qr {
   display: flex; justify-content: center;
   padding: 6px 0 10px;
}
.dice-qr svg { width: 180px; height: 180px; display: block; }
.dice-url {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.78rem;
   color: #555;
   word-break: break-all;
   background: #f4f4f4;
   padding: 8px 10px;
   border-radius: 3px;
   margin-top: 4px;
}

/* Bookmark hint */
.dice-shortcut {
   font-size: 0.95rem; margin: 6px 0 0;
}
.dice-shortcut kbd {
   display: inline-block;
   padding: 3px 8px;
   border: 1px solid #bbb;
   border-bottom-width: 2px;
   border-radius: 3px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   background: #f7f7f7;
   font-size: 0.9rem;
}

/* Like button — fixed to right edge of viewport, shifted up from center
   (LEGACY — no longer mounted, keep styles in case of a fallback).
   Implicit counter + CV row replaces this system. */
.dice-like-wrap { display: none !important; }

/* CV "Viewer Appreciation" row */
#cv-likes-row {
   transition: color 0.8s ease, background-color 0.8s ease;
}
#cv-likes-row.cv-likes-flash {
   animation: cv-likes-flash-kf 2.4s ease-out;
}
@keyframes cv-likes-flash-kf {
   0%   { color: #e00; background-color: rgba(224,0,0,0.08); }
   30%  { color: #e00; background-color: rgba(224,0,0,0.04); }
   100% { color: inherit; background-color: transparent; }
}

/* Center "endorsed N times" flash message */
.cv-likes-flash-msg {
   position: fixed;
   left: 50%;
   top: 42%;
   transform: translate(-50%, -50%);
   padding: 18px 26px;
   color: #e00;
   font-family: inherit;
   text-align: center;
   line-height: 1.5;
   pointer-events: none;
   z-index: 9500;
   animation: cv-flash-in .35s ease-out;
   text-shadow: 0 1px 10px rgba(255,255,255,0.8), 0 0 24px rgba(255,255,255,0.6);
}
.cv-likes-flash-msg .cv-likes-flash-cn,
.cv-likes-flash-msg .cv-likes-flash-en {
   font-size: 1.35rem;
   font-weight: 500;
}
.cv-likes-flash-msg .cv-likes-flash-en {
   font-size: 1.1rem;
   opacity: 0.9;
   margin-top: 4px;
}
.cv-likes-flash-msg strong {
   font-size: 1.5em;
   font-weight: 700;
}
.cv-likes-flash-msg.leaving {
   animation: cv-flash-out .3s ease-in forwards;
}
@keyframes cv-flash-in {
   0%   { opacity: 0; transform: translate(-50%, -40%); }
   100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes cv-flash-out {
   0%   { opacity: 1; transform: translate(-50%, -50%); }
   100% { opacity: 0; transform: translate(-50%, -60%); }
}

@media (max-width: 520px) {
   .dice-modal { padding: 22px 18px 18px; }
   .dice-emoji-pop { font-size: 2.4rem; }
}