monarch button

src/Components/Misc/MonarchCrown.tsx

@@ -12,13 +12,27 @@ export const MonarchCrown = ({ player }: { player: Player }) => {
       ? '5vmax'
       : '10vmin';
 
+  const rotationIsSide =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side;
+
   return (
-    <div className="flex justify-center items-center pointer-events-all flex-grow">
+    <div
+      data-rotation-is-side={rotationIsSide}
+      className="absolute w-full h-full flex items-start justify-center pointer-events-none z-[1]
+      data-[rotation-is-side=true]:justify-start data-[rotation-is-side=true]:items-center
+      "
+    >
+      <div
+        data-rotation-is-side={rotationIsSide}
+        className="data-[rotation-is-side=true]:-rotate-90"
+      >
         <IconCheckbox
+          className="pointer-events-all"
           name="useMonarch"
           checked={player.isMonarch}
           icon={<Monarch size={iconSize} color={player.color} stroke="white" />}
-        checkedIcon={<Monarch size={iconSize} color="black" stroke="black" />}
+          checkedIcon={<Monarch size={iconSize} color="gold" stroke="white" />}
           onChange={(e) => {
             const updatedPlayer = { ...player, isMonarch: e.target.checked };
 
@@ -35,5 +49,6 @@ export const MonarchCrown = ({ player }: { player: Player }) => {
           aria-label="Monarch"
         />
       </div>
+    </div>
   );
 };