Extract shared tile CSS into tiles.css

Base .tile and .tile.blank styles are now in a shared stylesheet
so they can be reused by multiple letter-based games.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

diff --git a/letterrip/game.html b/letterrip/game.html
index cbc5e945fe11f08ce312b50d0181694b02ebf480..7152b15b8a61000d6979c075d0f22667fae9afba 100644 (file)
--- a/letterrip/game.html
+++ b/letterrip/game.html
@@ -8,6 +8,7 @@
 
     <link rel="stylesheet" href="/reset.css" type="text/css" />
     <link rel="stylesheet" href="/style.css" type="text/css" />
+    <link rel="stylesheet" href="/tiles.css" type="text/css" />
     <link rel="stylesheet" href="letterrip.css" type="text/css" />
 
     <script src="/react.js"></script>

diff --git a/letterrip/letterrip.css b/letterrip/letterrip.css
index bfa1dbcd6bdbd169aa11111396ce6a90161ec853..c11ca836bab3cd13696045504f5e26d84e352c18 100644 (file)
--- a/letterrip/letterrip.css
+++ b/letterrip/letterrip.css
@@ -85,29 +85,7 @@
   margin: auto;
 }
 
-/* Tile styling */
-.tile {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  color: #000;
-  background: #f5e6c8;
-  border: 2px solid #c9a96e;
-  border-radius: 4px;
-  font-size: 22px;
-  font-weight: bold;
-  cursor: grab;
-  user-select: none;
-  box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
-  position: relative;
-}
-
-.tile.blank {
-  color: #888;
-  border-style: dashed;
-}
+/* Tile styling — base .tile and .tile.blank are in /tiles.css */
 
 .tile.selected {
   outline: 3px solid #3498db;

diff --git a/tiles.css b/tiles.css
new file mode 100644 (file)
index 0000000..6fdbc3e
--- /dev/null
+++ b/tiles.css
@@ -0,0 +1,23 @@
+/* Shared tile styling for letter-based games. */
+.tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  color: #000;
+  background: #f5e6c8;
+  border: 2px solid #c9a96e;
+  border-radius: 4px;
+  font-size: 22px;
+  font-weight: bold;
+  cursor: grab;
+  user-select: none;
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
+  position: relative;
+}
+
+.tile.blank {
+  color: #888;
+  border-style: dashed;
+}