terminei o inventario, falta o de habilidades/poderes '-'

rpg/css/base.css

@@ -61,6 +61,10 @@ body {
     background-color: var(--lines);
 }
 
+#btn {
+    cursor: pointer;
+}
+
 a span {
     overflow: hidden;
 }

rpg/css/style.css

@@ -265,6 +265,10 @@
             margin: 0 0.5dvh;
         }
 
+        input[type="text"] {
+            width: 20%;
+        }
+
         #btn {
             transition: 0.3s;
             border-radius: 1dvh;
@@ -279,7 +283,7 @@
         }
 
         input[type="number"] {
-            width: 3dvw;
+            width: 5dvw;
         }
 
         label {
@@ -302,7 +306,8 @@
     width: calc(100% - (30% + 25% + 30%));
 
     ul {
-        height: 100%;
+        height: 50%;
+        border-bottom: dotted 2px var(--lines);
         overflow-y: scroll;
 
         li {
@@ -320,6 +325,46 @@
             }
         }
     }
+    hgroup {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0;
+        input {
+            margin-top: 1dvh;
+            width: 90%;
+            border: none;
+            border-radius: 5px;
+            padding: 2px;
+            text-align: center;
+            background-color: var(--btncolor);
+            font-size: 1.2em;
+        }
+        textarea {
+            width: 90%;
+            height: 4dvw;
+            resize: none;
+            border: none;
+            border-radius: 5px;
+            padding: 2px;
+            background-color: var(--btncolor);
+            font-size: 1.2em;
+            margin-top: 0.5dvh;
+        }
+        a {
+            margin-top: 0.5dvh;
+            background-color: var(--btncolor);
+            width: 90%;
+            font-size: 1.2em;
+            padding: 3px;
+            text-align: center;
+            transition: 0.3s;
+            &:hover {
+                background-color: var(--lines);
+            }
+        }
+    }
 }
 
 #FloatInput {
@@ -408,20 +453,31 @@
     }
 }
 
-/* Responsividade */
+#statusPlayer {
+    text-align: center;
+    width: 10%;
+    position: fixed;
+    z-index: 1000;
+    top: 3dvh;
+    right: 3dvh;
+    padding: 0.5dvw;
+    border-radius: 10vw;
+    background-color: red;
+}
+
 @media only screen and (max-width: 1080px) {
     #playerDATA {
         flex-direction: column;
         align-items: center;
-        height: auto;
 
         #hero {
-            width: 40dvw;
-            height: 40dvw;
+            width: 40vw;
+            height: auto;
+            aspect-ratio: 1 / 1;
         }
 
         ul li {
-            font-size: 1em;
+            font-size: clamp(1em, 2vw, 1.2em);
         }
     }
 
@@ -433,51 +489,112 @@
         #inv,
         #powers {
             width: 100%;
-            min-height: 43vh;
-
-            hgroup input[type="text"] {
-                width: 20dvw;
-            }
-
-            hgroup input[type="number"] {
-                width: 8dvw;
-            }
+            min-height: 60vh;
         }
 
-        #status li {
-            border-top-right-radius: 2dvh;
-            border-bottom-right-radius: 2dvh;
+        #powers ul {
+            height: 30vh;
+        }
+
+        #powers hgroup textarea {
+            height: 12vh;
+        }
+
+        #status ul {
+            justify-content: center;
+            align-items: center;
         }
 
         #dados #list {
-            height: 30dvh;
+            height: 30vh;
         }
-    }
 
-    #inv ul {
-        max-height: 43vh;
-
-        li {
-            min-width: calc(100% / 4);
-            max-width: calc(100% / 4);
-            min-height: calc(100% / 4);
-            mix-height: calc(100% / 4);
+        #inv {
+            hgroup {
+                input[type="text"] {
+                    width: 25%;
+                }
+                input[type="number"] {
+                    width: 10%;
+                }
+            }
+            ul {
+                max-height: 40vh;
+                li {
+                    width: 23%;
+                    height: 20vh;
+                }
+            }
         }
     }
 
     #FloatInput {
-        width: 30%;
-        transform: translateY(50px) translateX(-50px);
+        width: 60%;
+        left: 20%;
+        transform: translateY(30px);
     }
 
-    #box_2 {
-        #text_lore {
-            a {
-                height: 200dvw;
-            }
-            textarea {
-                height: 200dvw;
-            }
+    #box_2 #text_lore {
+        textarea {
+            height: 40vh;
         }
     }
+
+    #statusPlayer {
+        width: 35%;
+        padding: 2dvw;
+    }
+}
+
+@media screen and (max-width: 1080px) and (orientation: landscape) {
+    #box_1 {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    #dados,
+    #status,
+    #inv,
+    #powers {
+        width: 48%;
+        min-height: 50vh;
+        max-height: none;
+    }
+
+    #powers {
+        width: 100%;
+        margin-top: 2vh;
+
+        ul {
+            height: 25vh;
+        }
+
+        hgroup textarea {
+            height: 15vh;
+        }
+    }
+
+    #playerDATA #hero {
+        width: 40vh;
+        height: 40vh;
+    }
+
+    #FloatInput {
+        width: 30%;
+        transform: translateX(-20%) translateY(10px);
+    }
+
+    #inv ul li {
+        width: calc(100% / 6 - 4px);
+        height: 15vh;
+    }
+
+    #box_2 #text_lore textarea {
+        height: 30vh;
+    }
+
+    #statusPlayer {
+        width: 25%;
+        padding: 1dvw;
+    }
 }