/* Cursors.
 *
 * The cursor is the whole interface: there is no verb bar, so the only way a
 * player learns that a crate opens is that the hand appears over it. They are
 * drawn as inline SVG rather than PNGs so they stay crisp, cost no requests,
 * and can be edited here rather than in an image editor.
 *
 * shape-rendering:crispEdges keeps them pixel-sharp. Each one is white with a
 * black outline so it reads against both the sky and the floor - the two
 * things a 16-colour room mostly consists of. */

/* Walking: a striding figure. The hotspot is at the feet, because that is the
   point the player is actually asking to stand on. */
.quests-cursor-walk {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cg stroke='%23000' stroke-width='2'%3E%3Crect x='9' y='1' width='5' height='5'/%3E%3Crect x='9' y='7' width='5' height='7'/%3E%3Crect x='4' y='8' width='5' height='2'/%3E%3Crect x='14' y='8' width='5' height='2'/%3E%3Crect x='6' y='15' width='3' height='7'/%3E%3Crect x='14' y='15' width='3' height='7'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='9' y='1' width='5' height='5'/%3E%3Crect x='9' y='7' width='5' height='7'/%3E%3Crect x='4' y='8' width='5' height='2'/%3E%3Crect x='14' y='8' width='5' height='2'/%3E%3Crect x='6' y='15' width='3' height='7'/%3E%3Crect x='14' y='15' width='3' height='7'/%3E%3C/g%3E%3C/svg%3E") 11 22, pointer;
}

/* Grabbing: an open hand. */
.quests-cursor-grab {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cg stroke='%23000' stroke-width='2'%3E%3Crect x='6' y='9' width='12' height='10'/%3E%3Crect x='7' y='3' width='2' height='7'/%3E%3Crect x='10' y='1' width='2' height='9'/%3E%3Crect x='13' y='2' width='2' height='8'/%3E%3Crect x='16' y='5' width='2' height='5'/%3E%3Crect x='3' y='8' width='3' height='6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='6' y='9' width='12' height='10'/%3E%3Crect x='7' y='3' width='2' height='7'/%3E%3Crect x='10' y='1' width='2' height='9'/%3E%3Crect x='13' y='2' width='2' height='8'/%3E%3Crect x='16' y='5' width='2' height='5'/%3E%3Crect x='3' y='8' width='3' height='6'/%3E%3C/g%3E%3C/svg%3E") 11 11, grab;
}

/* Using: a pointing hand. */
.quests-cursor-use {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cg stroke='%23000' stroke-width='2'%3E%3Crect x='9' y='1' width='3' height='11'/%3E%3Crect x='6' y='10' width='12' height='9'/%3E%3Crect x='12' y='6' width='3' height='5'/%3E%3Crect x='15' y='8' width='3' height='3'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='9' y='1' width='3' height='11'/%3E%3Crect x='6' y='10' width='12' height='9'/%3E%3Crect x='12' y='6' width='3' height='5'/%3E%3Crect x='15' y='8' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E") 10 2, pointer;
}

/* Talking: a speech bubble. */
.quests-cursor-talk {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M2 3h20v13H10l-5 5v-5H2z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3Cg fill='%23000'%3E%3Crect x='6' y='8' width='3' height='3'/%3E%3Crect x='11' y='8' width='3' height='3'/%3E%3Crect x='16' y='8' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E") 4 4, help;
}

/* Looking: an eye. Appears on right click, whatever is underneath. */
.quests-cursor-eye {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M1 12s4.5-7 11-7 11 7 11 7-4.5 7-11 7S1 12 1 12z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3.5' fill='%23000'/%3E%3C/svg%3E") 12 12, zoom-in;
}

/* Waiting: the engine is mid-cutscene and not listening. */
.quests-cursor-wait {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M5 2h14v5l-5 5 5 5v5H5v-5l5-5-5-5z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M9 5h6v2l-3 3-3-3z' fill='%23000'/%3E%3C/svg%3E") 12 12, wait;
}