From a5fbab3b74012c434b5fff4edeb3827dba47d81d Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sat, 7 Mar 2026 19:04:12 -0500
Subject: [PATCH] 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>
---
 letterrip/game.html     |  1 +
 letterrip/letterrip.css | 24 +-----------------------
 tiles.css               | 23 +++++++++++++++++++++++
 3 files changed, 25 insertions(+), 23 deletions(-)
 create mode 100644 tiles.css

diff --git a/letterrip/game.html b/letterrip/game.html
index cbc5e94..7152b15 100644
--- 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 bfa1dbc..c11ca83 100644
--- 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
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;
+}
-- 
2.45.2