From 441aeae8d377e98a3b3b254d0fd507c82f0ae00b Mon Sep 17 00:00:00 2001
From: "Z. Cliffe Schreuders" <code.cliffe@schreuders.org>
Date: Tue, 21 Oct 2025 10:58:56 +0100
Subject: [PATCH] Update Minigame Framework: Replace references to
 'minigames.css' with 'minigames-framework.css' across multiple HTML files for
 improved organization. Add new Google Font 'Pixelify Sans' to enhance
 typography in the game. Introduce new icon assets for better visual
 representation in various minigames, including search, disk, backpack, and
 clipboard icons. Update CSS styles for various minigames to enhance visual
 consistency and user experience.

---
 assets/{mini-games => icons}/backpack.png     | Bin
 assets/icons/clipboard.png                    | Bin 0 -> 146 bytes
 assets/icons/copy-sm.png                      | Bin 0 -> 126 bytes
 assets/icons/copy.png                         | Bin 0 -> 207 bytes
 assets/icons/disk.png                         |   2 +
 assets/icons/document.png                     |   2 +
 assets/icons/notebook.png                     |   2 +
 assets/icons/notes-sm.png                     | Bin 0 -> 200 bytes
 assets/icons/notes.aseprite                   | Bin 0 -> 470 bytes
 assets/icons/notes.png                        | Bin 0 -> 325 bytes
 assets/icons/play.png                         | Bin 0 -> 152 bytes
 assets/icons/search.png                       |   2 +
 assets/icons/signal.png                       |   2 +
 css/biometrics-minigame.css                   |  80 +++++--
 css/bluetooth-scanner.css                     |  95 +++++---
 css/container-minigame.css                    |  84 +++++---
 css/dusting.css                               |  18 +-
 css/lockpick-set-minigame.css                 |  69 ++++--
 css/lockpicking.css                           |   4 +-
 css/main.css                                  | 134 +++++++++++-
 css/minigames-framework.css                   |  46 ++--
 css/minigames.css                             | 193 -----------------
 css/modals.css                                |  18 +-
 css/notes.css                                 |  27 ++-
 css/notifications.css                         |   4 +-
 css/panels.css                                |  62 +++---
 css/password-minigame.css                     |  94 +++++---
 css/phone.css                                 | 202 ++++++++++--------
 css/pin.css                                   | 145 +++++++++----
 css/text-file-minigame.css                    |  96 ++++++---
 css/utilities.css                             |  77 ++++++-
 index.html                                    |   7 +-
 .../biometrics/biometrics-minigame.js         |   2 +-
 .../bluetooth/bluetooth-scanner-minigame.js   |   6 +-
 js/minigames/framework/base-minigame.js       |   5 +
 .../lockpick/lockpick-set-minigame.js         |   2 +-
 js/minigames/notes/notes-minigame.js          |  67 +++---
 js/minigames/phone/phone-messages-minigame.js |  62 +++++-
 js/minigames/text-file/text-file-minigame.js  |  11 +-
 test-auto-desktop.html                        |   2 +-
 test-container-desktop.html                   |   2 +-
 test-container-interactive-items.html         |   2 +-
 test-container-simple.html                    |   2 +-
 test-password-minigame.html                   |   2 +-
 test-phone-minigame.html                      |   2 +-
 test-pin-minigame.html                        |   2 +-
 test-text-file-minigame.html                  |   2 +-
 verify-css.html                               |   2 +-
 48 files changed, 999 insertions(+), 639 deletions(-)
 rename assets/{mini-games => icons}/backpack.png (100%)
 create mode 100644 assets/icons/clipboard.png
 create mode 100644 assets/icons/copy-sm.png
 create mode 100644 assets/icons/copy.png
 create mode 100644 assets/icons/disk.png
 create mode 100644 assets/icons/document.png
 create mode 100644 assets/icons/notebook.png
 create mode 100644 assets/icons/notes-sm.png
 create mode 100644 assets/icons/notes.aseprite
 create mode 100644 assets/icons/notes.png
 create mode 100644 assets/icons/play.png
 create mode 100644 assets/icons/search.png
 create mode 100644 assets/icons/signal.png
 delete mode 100644 css/minigames.css

diff --git a/assets/mini-games/backpack.png b/assets/icons/backpack.png
similarity index 100%
rename from assets/mini-games/backpack.png
rename to assets/icons/backpack.png
diff --git a/assets/icons/clipboard.png b/assets/icons/clipboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..d778b43d3f8e60d1361a258ebd0b2103f942c96a
GIT binary patch
literal 146
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|d^}woLo9ml
zPWI+&aNuzM&GUVKQF^{Wc3R>V?_Z4$4wG`C%^5N}kJ!BIJ7SY)y<lBO-jiZp1tCA*
sd-o6WGjS>0t?J32yRrTvyZ%0g`5gLxgKA^)f#x!Jy85}Sb4q9e029G5n*aa+

literal 0
HcmV?d00001

diff --git a/assets/icons/copy-sm.png b/assets/icons/copy-sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ef2aa6da2dae281d55888b4e783d60cdb0656c6
GIT binary patch
literal 126
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqjKx9jP7LeL$-D$|EIeHtLnNl=
z_B--17;qd~@&CWE^;sV^^OY(MDmS;uF@Bk7u-B^~(Z1G=MeA$`W6sNqiCg%1H=MP7
Y|4jS+>sPZ9fo3pxy85}Sb4q9e02$aQeE<Le

literal 0
HcmV?d00001

diff --git a/assets/icons/copy.png b/assets/icons/copy.png
new file mode 100644
index 0000000000000000000000000000000000000000..297fe312da2bf712bd15cda25be1a0c36358068b
GIT binary patch
literal 207
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}ot`d^ArY-_
zr&;qcC~~+ozWJNK^?K9VZH6C>7c87`UCZELpo&&rdwaLiGtaD5hxd3h?Kv7Kcz&IW
z{fYudv-t~Hd~7dlsyg;|-@NGy_+0Yb^u^vW<nEJvDW}1xx`1T~_Y6Cii}eS4^4NW*
zcK)=DlxcH4b9rK5%r5pztUH!H^h<V1HVu-IeR$Ni<^-pz?1l3$*@2E?@O1TaS?83{
F1OTJpO}_vD

literal 0
HcmV?d00001

diff --git a/assets/icons/disk.png b/assets/icons/disk.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/disk.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/assets/icons/document.png b/assets/icons/document.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/document.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/assets/icons/notebook.png b/assets/icons/notebook.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/notebook.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/assets/icons/notes-sm.png b/assets/icons/notes-sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..f80ba3491b781858d22e09128b4dd17c9f5503b5
GIT binary patch
literal 200
zcmeAS@N?(olHy`uVBq!ia0vp^oFL4>1|%O$WD@{VjKx9jP7LeL$-D$|nmk<`LnNjq
zrz9jK1SEz3KHtE6=XYiI#6}S4Zhrg!z5RZ}4_`DV|JUBQ`fvK9M+v{rA2@Je!MU})
zrw!Pa<=fX88W|WE-1$=_x?O2T^@mv{@1N_s@r8vQQv3Vkuk?D)9-a#d8gI|KPW<ud
wsrKRK-Te~V^lvc-9yxmOTl}N_On#FY`15Ua`hTuI0(1?7r>mdKI;Vst0AA)*IsgCw

literal 0
HcmV?d00001

diff --git a/assets/icons/notes.aseprite b/assets/icons/notes.aseprite
new file mode 100644
index 0000000000000000000000000000000000000000..f581ac2c8c7ba9f342c76a316dcb4d0e2520e090
GIT binary patch
literal 470
zcmcb{$iVPmDI<db5GpVLISeU4i~v9}kRVtdAxb?~7|`@zA6dY*vH*=017dasu$4%b
zWC7VMAlE4X8A=K!t{OIJmWKUd*7pn5ZZ1fBcX-zCPi8Zp24w9sFrSj=ov9z>tzu+j
zX>VU*kkAyJ_b_?(|M;^{PT&6X|NsBlYqz)5wP$8!MTP~HId!cuGP)U_e7$;C|8%de
zd;@uqO$y9F5(fSQ8SD%`iIu5E3Wm#p999L0)PE)j4GElzImrnP460>Y|367sQO2gn
zx9$J_|9{k^{O21<u907&uV?eHJ|MtghX1NM<;uzbr54RfD0avR`WpPIPC)F@)3)TI
zH{#+Vzx>zzRoFYFW&X5n@9I+vjW_&VP$0A71M^FD^FIl{PHvQ6GX2sQ_CpH4cUxO&
faM=s+3biLrs61h^siG`PtgWu-lRm@!6^C^InOS`#

literal 0
HcmV?d00001

diff --git a/assets/icons/notes.png b/assets/icons/notes.png
new file mode 100644
index 0000000000000000000000000000000000000000..2922fc4271ecbfa58fe19477ba13f67473befa2f
GIT binary patch
literal 325
zcmV-L0lNN)P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#|4BqaR5*=eWPk!CcD4TulmIRcw*SBX{3aStpECKs61&=e7A_99{~`WS3}1eK
zW>DwWX1MwFDoGZzXo%}EoZ5Gi;nC;23>p%8B)gpD+`}`BFfW|Edz@qgn3UMn{tNMP
z|L0(3We^t>Al-m_KW{OzvamD!`2CyV<@*mL8^9tiDD>am&5!&*6qb@^IC|h3!}E_9
z807erNq51utC!({c=`Dyk_~_dA_D^h`GE-IkQInRyxjkNyh6zjL<J#DhAStoFx+@~
ziJ`HviF6krr^M2V3Pv6tZg{Tz^5rW74-Yq-Mizf?_YngF0|Nux|6Ckw|0Vt_kn92g
X{%4P$E+lc?00000NkvXXu0mjfz-)`k

literal 0
HcmV?d00001

diff --git a/assets/icons/play.png b/assets/icons/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e507d5541016ed16c16d4f076e94b266b11e3cc
GIT binary patch
literal 152
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|f;?RuLo9mN
zUN+=oP~c#8nDyho{%a+^8Ejo;?~iiaxU(@$;55SrmK6f5s{*)E0wfbA@VKntt#I4^
yLVrTz5BAgsUq#kUwhJ6eh4mfwwlc3cnjbl5w~EP6F=rQ`=?tE(elF{r5}E+9oiJ_y

literal 0
HcmV?d00001

diff --git a/assets/icons/search.png b/assets/icons/search.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/search.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/assets/icons/signal.png b/assets/icons/signal.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/signal.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/css/biometrics-minigame.css b/css/biometrics-minigame.css
index f05dd9e..9489aa9 100644
--- a/css/biometrics-minigame.css
+++ b/css/biometrics-minigame.css
@@ -9,10 +9,46 @@
     height: auto !important;
     max-height: 60vh !important;
     background: linear-gradient(135deg, #2e1a1a 0%, #3e1616 50%, #600f0f 100%) !important;
-    border: 2px solid #e74c3c !important;
     box-shadow: 0 0 20px rgba(231, 76, 60, 0.3), inset 0 0 10px rgba(231, 76, 60, 0.1) !important;
-    border-radius: 10px !important;
-    font-family: 'VT323', monospace !important;
+    border: 4px solid #e74c3c !important;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    ) !important;
     color: #e0e0e0 !important;
     overflow: hidden !important;
     transition: all 0.3s ease !important;
@@ -47,7 +83,7 @@
     padding: 10px;
     background: rgba(231, 76, 60, 0.1);
     border: 1px solid #e74c3c;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     box-shadow: 0 0 10px rgba(231, 76, 60, 0.2);
 }
 
@@ -55,7 +91,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 16px;
+    font-size: 18px;
     font-weight: bold;
     color: #e74c3c;
     text-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
@@ -66,7 +102,7 @@
     color: #4caf50;
     background: rgba(76, 175, 80, 0.2);
     padding: 2px 6px;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     border: 1px solid #4caf50;
     margin-left: auto;
 }
@@ -118,7 +154,7 @@
     height: 24px;
     background: rgba(231, 76, 60, 0.2);
     border: 1px solid #e74c3c;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -145,7 +181,7 @@
     justify-content: center;
     padding: 10px;
     background: rgba(231, 76, 60, 0.1);
-    border-radius: 6px;
+    /* border-radius: 6px; */
     box-shadow: 0 0 10px rgba(231, 76, 60, 0.2);
 }
 
@@ -172,9 +208,8 @@
     padding: 8px 12px;
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #e74c3c;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     color: #e0e0e0;
-    font-family: 'VT323', monospace;
     font-size: 14px;
     box-shadow: 0 0 8px rgba(231, 76, 60, 0.2);
     transition: all 0.3s ease;
@@ -202,7 +237,7 @@
     padding: 6px 12px;
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #555;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     cursor: pointer;
     font-size: 12px;
     color: #ccc;
@@ -237,9 +272,8 @@
     padding: 8px 12px;
     background: rgba(231, 76, 60, 0.2);
     border: 1px solid #e74c3c;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     color: #e74c3c;
-    font-family: 'VT323', monospace;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -260,7 +294,7 @@
 }
 
 .biometrics-action-btn .btn-icon {
-    font-size: 16px;
+    font-size: 18px;
 }
 
 .biometrics-action-btn .btn-text {
@@ -291,7 +325,7 @@
     padding: 8px 12px;
     background: rgba(0, 0, 0, 0.2);
     border: 1px solid #444;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     font-size: 14px;
     font-weight: bold;
     color: #e74c3c;
@@ -302,7 +336,7 @@
     color: #4caf50;
     background: rgba(76, 175, 80, 0.2);
     padding: 2px 6px;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     border: 1px solid #4caf50;
 }
 
@@ -312,7 +346,7 @@
     padding: 8px;
     background: rgba(0, 0, 0, 0.1);
     border: 1px solid #333;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     max-height: 300px;
 }
 
@@ -322,12 +356,12 @@
 
 .biometrics-samples-list::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
+    /* border-radius: 4px; */
 }
 
 .biometrics-samples-list::-webkit-scrollbar-thumb {
     background: #e74c3c;
-    border-radius: 4px;
+    /* border-radius: 4px; */
 }
 
 .biometrics-samples-list::-webkit-scrollbar-thumb:hover {
@@ -338,7 +372,7 @@
 .sample-item {
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #444;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     margin-bottom: 6px;
     padding: 10px;
     transition: all 0.3s ease;
@@ -371,7 +405,7 @@
     color: #e74c3c;
     background: rgba(231, 76, 60, 0.2);
     padding: 2px 6px;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     border: 1px solid #e74c3c;
 }
 
@@ -385,7 +419,7 @@
 .sample-quality {
     font-weight: bold;
     padding: 2px 6px;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     border: 1px solid;
 }
 
@@ -437,7 +471,7 @@
     padding: 10px;
     background: rgba(0, 0, 0, 0.2);
     border: 1px solid #444;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     font-size: 12px;
     line-height: 1.4;
     color: #ccc;
diff --git a/css/bluetooth-scanner.css b/css/bluetooth-scanner.css
index 804ab81..0dd9233 100644
--- a/css/bluetooth-scanner.css
+++ b/css/bluetooth-scanner.css
@@ -9,9 +9,46 @@
     height: auto !important;
     max-height: 60vh !important;
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
-    border: 2px solid #00bcd4 !important;
     box-shadow: 0 0 20px rgba(0, 188, 212, 0.3), inset 0 0 10px rgba(0, 188, 212, 0.1) !important;
-    border-radius: 10px !important;
+    border: 4px solid #00bcd4 !important;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    ) !important;
     font-family: 'VT323', monospace !important;
     color: #e0e0e0 !important;
     overflow: hidden !important;
@@ -47,7 +84,7 @@
     padding: 10px;
     background: rgba(0, 188, 212, 0.1);
     border: 1px solid #00bcd4;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     box-shadow: 0 0 10px rgba(0, 188, 212, 0.2);
 }
 
@@ -55,7 +92,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 16px;
+    font-size: 18px;
     font-weight: bold;
     color: #00bcd4;
     text-shadow: 0 0 5px rgba(0, 188, 212, 0.5);
@@ -71,7 +108,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 14px;
+    font-size: 18px;
     color: #4caf50;
 }
 
@@ -108,12 +145,12 @@
     height: 24px;
     background: rgba(0, 188, 212, 0.2);
     border: 1px solid #00bcd4;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
+    font-size: 18px;
     color: #00bcd4;
     transition: all 0.3s ease;
     z-index: 10;
@@ -151,10 +188,10 @@
     padding: 8px 12px;
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #00bcd4;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     color: #e0e0e0;
     font-family: 'VT323', monospace;
-    font-size: 14px;
+    font-size: 18px;
     box-shadow: 0 0 8px rgba(0, 188, 212, 0.2);
     transition: all 0.3s ease;
 }
@@ -180,9 +217,9 @@
     padding: 6px 12px;
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #555;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     cursor: pointer;
-    font-size: 12px;
+    font-size: 18px;
     color: #ccc;
     transition: all 0.3s ease;
     user-select: none;
@@ -222,18 +259,18 @@
     padding: 8px 12px;
     background: rgba(0, 0, 0, 0.2);
     border: 1px solid #444;
-    border-radius: 6px;
-    font-size: 14px;
+    /* border-radius: 6px; */
+    font-size: 18px;
     font-weight: bold;
     color: #00bcd4;
 }
 
 .device-count {
-    font-size: 12px;
+    font-size: 18px;
     color: #4caf50;
     background: rgba(76, 175, 80, 0.2);
     padding: 2px 6px;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     border: 1px solid #4caf50;
 }
 
@@ -243,7 +280,7 @@
     padding: 8px;
     background: rgba(0, 0, 0, 0.1);
     border: 1px solid #333;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     max-height: 300px;
 }
 
@@ -253,12 +290,12 @@
 
 .bluetooth-device-list::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
+    /* border-radius: 4px; */
 }
 
 .bluetooth-device-list::-webkit-scrollbar-thumb {
     background: #00bcd4;
-    border-radius: 4px;
+    /* border-radius: 4px; */
 }
 
 .bluetooth-device-list::-webkit-scrollbar-thumb:hover {
@@ -269,7 +306,7 @@
 .bluetooth-device {
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #444;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     margin-bottom: 6px;
     padding: 10px;
     cursor: pointer;
@@ -296,7 +333,7 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 6px;
-    font-size: 14px;
+    font-size: 18px;
     font-weight: bold;
     color: #e0e0e0;
 }
@@ -308,7 +345,7 @@
 }
 
 .bluetooth-device-icon {
-    font-size: 12px;
+    font-size: 18px;
     opacity: 0.8;
 }
 
@@ -329,7 +366,7 @@
 .bluetooth-signal-bar {
     width: 3px;
     background: #666;
-    border-radius: 1px;
+    /* border-radius: 1px; */
     transition: all 0.3s ease;
 }
 
@@ -345,7 +382,7 @@
 }
 
 .bluetooth-device-details {
-    font-size: 12px;
+    font-size: 18px;
     color: #aaa;
     white-space: pre-line;
     margin-bottom: 6px;
@@ -360,7 +397,7 @@
 }
 
 .bluetooth-device-timestamp {
-    font-size: 10px;
+    font-size: 18px;
     color: #666;
     font-style: italic;
 }
@@ -371,8 +408,8 @@
     padding: 10px;
     background: rgba(0, 0, 0, 0.2);
     border: 1px solid #444;
-    border-radius: 6px;
-    font-size: 12px;
+    /* border-radius: 6px; */
+    font-size: 18px;
     line-height: 1.4;
     color: #ccc;
     transition: all 0.3s ease;
@@ -406,7 +443,7 @@
     }
     
     .bluetooth-scanner-title {
-        font-size: 14px;
+        font-size: 18px;
     }
     
     .bluetooth-categories {
@@ -417,7 +454,7 @@
     .bluetooth-category {
         text-align: center;
         padding: 4px 8px;
-        font-size: 11px;
+        font-size: 18px;
     }
     
     .bluetooth-device-name {
@@ -433,7 +470,7 @@
     .bluetooth-scanner-expand-toggle {
         width: 20px;
         height: 20px;
-        font-size: 10px;
+        font-size: 18px;
     }
 }
 
diff --git a/css/container-minigame.css b/css/container-minigame.css
index 395452e..484fd0b 100644
--- a/css/container-minigame.css
+++ b/css/container-minigame.css
@@ -19,7 +19,44 @@
 .container-monitor-bezel {
     background: #666;
     border: 8px solid #444;
-    border-radius: 15px;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
     padding: 20px;
     box-shadow: 
         inset 0 0 20px rgba(0, 0, 0, 0.5),
@@ -51,7 +88,7 @@
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.4);
-    border-radius: 7px;
+    /* border-radius: 7px; */
     z-index: 1;
 }
 
@@ -65,11 +102,11 @@
     transform: rotate(-3deg);
     background: #ffff88;
     border: 1px solid #ddd;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     padding: 15px;
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
-    font-family: 'Press Start 2P', monospace;
-    font-size: 8px;
+    font-family: 'Pixelify Sans', 'Comic Sans MS', cursive;
+    font-size: 18px;
     color: #333;
     max-width: 200px;
     word-wrap: break-word;
@@ -165,7 +202,7 @@
     image-rendering: -moz-crisp-edges;
     image-rendering: crisp-edges;
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
+    /* border-radius: 8px; */
     padding: 4px;
     border: 2px solid transparent;
 }
@@ -204,13 +241,12 @@
 
 .desktop-title {
     font-family: 'Press Start 2P', monospace;
-    font-size: 10px;
+    font-size: 20px;
     color: #00ff00;
 }
 
 .desktop-subtitle {
-    font-family: 'VT323', monospace;
-    font-size: 14px;
+    font-size: 20px;
     color: #ccc;
 }
 
@@ -225,7 +261,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: 'Press Start 2P', monospace;
-    font-size: 12px;
+    font-size: 18px;
     color: #666;
     text-align: center;
 }
@@ -248,20 +284,19 @@
     image-rendering: -moz-crisp-edges;
     image-rendering: crisp-edges;
     border: 2px solid rgba(255, 255, 255, 0.3);
-    border-radius: 5px;
+    /* border-radius: 5px; */
     background: rgba(0, 0, 0, 0.3);
 }
 
 .container-info h4 {
     font-family: 'Press Start 2P', monospace;
-    font-size: 14px;
+    font-size: 20px;
     margin: 0 0 10px 0;
     color: #3498db;
 }
 
 .container-info p {
-    font-family: 'VT323', monospace;
-    font-size: 16px;
+    font-size: 20px;
     margin: 0;
     color: #ecf0f1;
     line-height: 1.4;
@@ -276,7 +311,7 @@
 
 .container-contents-section h4 {
     font-family: 'Press Start 2P', monospace;
-    font-size: 12px;
+    font-size: 18px;
     margin: 0;
     color: #e74c3c;
     text-align: center;
@@ -301,12 +336,12 @@
 
 .container-contents-grid::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
+    /* border-radius: 4px; */
 }
 
 .container-contents-grid::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.3);
-    border-radius: 4px;
+    /* border-radius: 4px; */
 }
 
 .container-contents-grid::-webkit-scrollbar-thumb:hover {
@@ -322,7 +357,7 @@
     justify-content: center;
     align-items: center;
     background: rgb(149 157 216 / 80%);
-    border-radius: 5px;
+    /* border-radius: 5px; */
     transition: all 0.2s ease;
 }
 
@@ -352,15 +387,14 @@
     transform: translateX(-50%);
     color: white;
     padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
+    /* border-radius: 4px; */
+    font-size: 18px;
     white-space: nowrap;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.2s;
     background: rgba(0, 0, 0, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.3);
-    font-family: 'VT323', monospace;
     z-index: 1000;
 }
 
@@ -372,8 +406,7 @@
     grid-column: 1 / -1;
     text-align: center;
     color: #95a5a6;
-    font-family: 'VT323', monospace;
-    font-size: 16px;
+    font-size: 20px;
     margin: 20px 0;
     font-style: italic;
 }
@@ -396,9 +429,8 @@
     left: 50%;
     transform: translateX(-50%);
     padding: 10px 20px;
-    border-radius: 5px;
-    font-family: 'VT323', monospace;
-    font-size: 14px;
+    /* border-radius: 5px; */
+    font-size: 20px;
     z-index: 10001;
     animation: slideDown 0.3s ease;
 }
diff --git a/css/dusting.css b/css/dusting.css
index b4c1f32..ede01f3 100644
--- a/css/dusting.css
+++ b/css/dusting.css
@@ -11,7 +11,7 @@
     height: 60%;
     margin: 0 auto 20px auto;
     background: #1a1a1a;
-    border-radius: 5px;
+    border: 2px solid #333;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
     position: relative;
     overflow: hidden;
@@ -42,9 +42,9 @@
 .dusting-tool-button {
     padding: 8px 12px;
     border: none;
-    border-radius: 3px;
+    border: 2px solid #333;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 20px;
     font-weight: bold;
     color: white;
     transition: opacity 0.2s, transform 0.1s;
@@ -87,7 +87,7 @@
     position: absolute;
     width: 3px;
     height: 3px;
-    border-radius: 50%;
+    border: 2px solid #333;
     pointer-events: none;
     z-index: 2;
 }
@@ -99,10 +99,10 @@
     right: 10px;
     background: rgba(0, 0, 0, 0.8);
     padding: 10px;
-    border-radius: 3px;
+    border: 2px solid #333;
     color: white;
     font-family: 'VT323', monospace;
-    font-size: 14px;
+    font-size: 20px;
     z-index: 3;
 }
 
@@ -159,13 +159,13 @@
 }
 
 .dusting-success-quality {
-    font-size: 18px;
+    font-size: 20px;
     margin-bottom: 15px;
     color: #fff;
 }
 
 .dusting-success-details {
-    font-size: 14px;
+    font-size: 20px;
     color: #aaa;
 }
 
@@ -176,7 +176,7 @@
 }
 
 .dusting-failure-subtitle {
-    font-size: 16px;
+    font-size: 20px;
     margin-top: 5px;
     color: #fff;
 } 
\ No newline at end of file
diff --git a/css/lockpick-set-minigame.css b/css/lockpick-set-minigame.css
index 8ff55f5..c5c9494 100644
--- a/css/lockpick-set-minigame.css
+++ b/css/lockpick-set-minigame.css
@@ -9,10 +9,46 @@
     height: auto !important;
     max-height: 60vh !important;
     background: linear-gradient(135deg, #1a2e1a 0%, #163e16 50%, #0f600f 100%) !important;
-    border: 2px solid #4caf50 !important;
     box-shadow: 0 0 20px rgba(76, 175, 80, 0.3), inset 0 0 10px rgba(76, 175, 80, 0.1) !important;
-    border-radius: 10px !important;
-    font-family: 'VT323', monospace !important;
+    border: 4px solid #4caf50 !important;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    ) !important;
     color: #e0e0e0 !important;
     overflow: hidden !important;
     transition: all 0.3s ease !important;
@@ -47,7 +83,7 @@
     padding: 10px;
     background: rgba(76, 175, 80, 0.1);
     border: 1px solid #4caf50;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
 }
 
@@ -55,7 +91,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 16px;
+    font-size: 18px;
     font-weight: bold;
     color: #4caf50;
     text-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
@@ -71,7 +107,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 14px;
+    font-size: 18px;
     color: #4caf50;
 }
 
@@ -108,12 +144,12 @@
     height: 24px;
     background: rgba(76, 175, 80, 0.2);
     border: 1px solid #4caf50;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
+    font-size: 18px;
     color: #4caf50;
     transition: all 0.3s ease;
     z-index: 10;
@@ -135,7 +171,7 @@
     justify-content: center;
     padding: 10px;
     background: rgba(76, 175, 80, 0.1);
-    border-radius: 6px;
+    /* border-radius: 6px; */
     box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
 }
 
@@ -147,10 +183,9 @@
     padding: 8px 12px;
     background: rgba(76, 175, 80, 0.2);
     border: 1px solid #4caf50;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     color: #4caf50;
-    font-family: 'VT323', monospace;
-    font-size: 14px;
+    font-size: 18px;
     cursor: pointer;
     transition: all 0.3s ease;
     user-select: none;
@@ -170,7 +205,7 @@
 }
 
 .lockpick-action-btn .btn-icon {
-    font-size: 16px;
+    font-size: 18px;
 }
 
 .lockpick-action-btn .btn-text {
@@ -183,8 +218,8 @@
     padding: 10px;
     background: rgba(0, 0, 0, 0.2);
     border: 1px solid #444;
-    border-radius: 6px;
-    font-size: 12px;
+    /* border-radius: 6px; */
+    font-size: 18px;
     line-height: 1.4;
     color: #ccc;
     transition: all 0.3s ease;
@@ -218,13 +253,13 @@
     }
     
     .lockpick-set-title {
-        font-size: 14px;
+        font-size: 18px;
     }
     
     .lockpick-action-btn {
         justify-content: center;
         padding: 6px 10px;
-        font-size: 12px;
+        font-size: 18px;
     }
     
     .lockpick-expand-toggle {
diff --git a/css/lockpicking.css b/css/lockpicking.css
index 21823b8..f06f91c 100644
--- a/css/lockpicking.css
+++ b/css/lockpicking.css
@@ -5,10 +5,10 @@
     background: rgba(0, 0, 0, 0.8);
     color: #00ff00;
     padding: 10px 15px;
-    border-radius: 5px;
+    border: 2px solid #00ff00;
     margin: 10px 0;
     font-family: 'VT323', monospace;
-    font-size: 16px;
+    font-size: 20px;
     text-align: center;
     border: 1px solid #00ff00;
     min-height: 20px;
diff --git a/css/main.css b/css/main.css
index e439f67..1b90390 100644
--- a/css/main.css
+++ b/css/main.css
@@ -7,6 +7,7 @@ body {
     align-items: center;
     min-height: 100vh;
     background: #333;
+    font-smooth: never;
 }
 
 #game-container {
@@ -32,7 +33,7 @@ body {
     transform: translate(-50%, -50%);
     color: white;
     font-family: 'Press Start 2P', monospace;
-    font-size: 16px;
+    font-size: 18px;
 }
 
 /* Laptop popup styles - matching minigame style */
@@ -46,14 +47,89 @@ body {
     background: rgba(0, 0, 0, 0.95);
     z-index: 2000;
     pointer-events: auto;
-    border-radius: 10px;
-    border: 2px solid #444;
+    border: 4px solid #444;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
 }
 
 .laptop-frame {
     background: transparent;
-    border-radius: 8px;
+    border: 2px solid #444;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
     padding: 20px;
     width: 100%;
     height: calc(100% - 40px);
@@ -64,7 +140,45 @@ body {
     width: 100%;
     height: 100%;
     background: #1a1a1a;
-    border-radius: 8px;
+    border: 2px solid #333;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -79,18 +193,18 @@ body {
     align-items: center;
     border-bottom: 1px solid #444;
     font-family: 'VT323', monospace;
-    font-size: 16px;
+    font-size: 18px;
 }
 
 .title-bar .close-btn {
     background: #e74c3c;
     color: white;
     border: none;
-    border-radius: 3px;
+    border: 2px solid #333;
     width: 24px;
     height: 24px;
     cursor: pointer;
-    font-size: 16px;
+    font-size: 18px;
     font-weight: bold;
     display: flex;
     align-items: center;
@@ -112,7 +226,7 @@ body {
     width: 100%;
     height: 100%;
     border: none;
-    border-radius: 5px;
+    border: 2px solid #333;
 }
 
 .laptop-close-btn {
@@ -124,7 +238,7 @@ body {
     background: #e74c3c;
     color: white;
     border: none;
-    border-radius: 50%;
+    border: 2px solid #333;
     cursor: pointer;
     font-size: 18px;
     font-weight: bold;
diff --git a/css/minigames-framework.css b/css/minigames-framework.css
index 3f70572..cd21dbb 100644
--- a/css/minigames-framework.css
+++ b/css/minigames-framework.css
@@ -12,24 +12,28 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-family: 'Press Start 2P', monospace;
+    font-family: 'VT323', monospace;
     color: white;
-    border-radius: 10px;
-    border: 2px solid #444;
+    border: 4px solid #444;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+    font-size: 18px;
+}
+
+.minigame-container input, .minigame-container select, .minigame-container textarea, .minigame-container button, .minigame-game-container pre {
+    font-family: 'VT323', monospace;
 }
 
 .minigame-header {
     width: 100%;
     text-align: center;
-    font-size: 18px;
+    font-size: 20px;
     margin-bottom: 20px;
     color: #3498db;
 }
 
 .minigame-header h3 {
     font-family: 'Press Start 2P', monospace;
-    font-size: 16px;
+    font-size: 18px;
     margin: 0 0 10px 0;
 }
 
@@ -42,13 +46,10 @@
 .minigame-game-container {
     width: 80%;
     max-width: 600px;
-    height: 55%;
     margin: 20px auto;
     background: #1a1a1a;
-    border-radius: 5px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
     position: relative;
-    overflow: visible;
 }
 
 .minigame-message-container {
@@ -69,11 +70,10 @@
     background: rgba(46, 204, 113, 0.9);
     color: white;
     padding: 20px;
-    border-radius: 10px;
+    border: 2px solid #27ae60;
     text-align: center;
     z-index: 10001;
-    font-size: 14px;
-    border: 2px solid #27ae60;
+    font-size: 18px;
     box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
 }
 
@@ -85,11 +85,10 @@
     background: rgba(231, 76, 60, 0.9);
     color: white;
     padding: 20px;
-    border-radius: 10px;
+    border: 2px solid #c0392b;
     text-align: center;
     z-index: 10001;
-    font-size: 14px;
-    border: 2px solid #c0392b;
+    font-size: 18px;
     box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
 }
 
@@ -111,7 +110,7 @@
     padding: 10px 20px;
     cursor: pointer;
     font-family: 'VT323', monospace;
-    font-size: 16px;
+    font-size: 18px;
     transition: background 0.3s;
 }
 
@@ -127,7 +126,7 @@
     width: 100%;
     height: 20px;
     background: #333;
-    border-radius: 10px;
+    border: 2px solid #333;
     overflow: hidden;
     margin: 10px 0;
 }
@@ -139,6 +138,13 @@
     transition: width 0.3s;
 }
 
+.instructions {
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #ccc;
+}
+
 /* Minigame disabled state */
 .minigame-disabled {
     pointer-events: none !important;
@@ -160,9 +166,8 @@
     color: white;
     border: 4px solid #c0392b;
     cursor: pointer;
-    font-family: 'Press Start 2P', monospace;
+    font-family: 'Press Start 2P', monospace !important;
     font-size: 18px;
-    font-weight: bold;
     z-index: 10000;
     display: flex;
     align-items: center;
@@ -183,7 +188,7 @@
     width: 100%;
     height: 10px;
     background: #333;
-    border-radius: 5px;
+    border: 2px solid #333;
     overflow: hidden;
     margin-top: 5px;
 }
@@ -192,6 +197,5 @@
     height: 100%;
     background: linear-gradient(90deg, #2ecc71, #27ae60);
     transition: width 0.3s ease;
-    border-radius: 5px;
+    border: 2px solid #27ae60;
 }
-
diff --git a/css/minigames.css b/css/minigames.css
deleted file mode 100644
index 99eb195..0000000
--- a/css/minigames.css
+++ /dev/null
@@ -1,193 +0,0 @@
-/* Minigames Styles */
-
-
-/* Minigame Framework Styles */
-.minigame-container {
-    position: fixed;
-    top: 2vh;
-    left: 2vw;
-    width: 96vw;
-    height: 96vh;
-    background: rgba(0, 0, 0, 0.95);
-    z-index: 2000;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-family: 'Press Start 2P', monospace;
-    color: white;
-    border-radius: 10px;
-    border: 2px solid #444;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
-}
-
-.minigame-header {
-    width: 100%;
-    text-align: center;
-    font-size: 18px;
-    margin-bottom: 20px;
-    color: #3498db;
-}
-
-.minigame-game-container {
-    width: 80%;
-    max-width: 600px;
-    height: 60%;
-    margin: 20px auto;
-    background: #1a1a1a;
-    border-radius: 5px;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
-    position: relative;
-}
-
-.minigame-message-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 1000;
-}
-
-.minigame-success-message {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: rgba(46, 204, 113, 0.9);
-    color: white;
-    padding: 20px;
-    border-radius: 10px;
-    text-align: center;
-    z-index: 10001;
-    font-size: 14px;
-    border: 2px solid #27ae60;
-    box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
-}
-
-.minigame-failure-message {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: rgba(231, 76, 60, 0.9);
-    color: white;
-    padding: 20px;
-    border-radius: 10px;
-    text-align: center;
-    z-index: 10001;
-    font-size: 14px;
-    border: 2px solid #c0392b;
-    box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
-}
-
-.minigame-controls {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    margin-top: 20px;
-}
-
-.minigame-button {
-    background: #3498db;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    font-family: 'Press Start 2P', monospace;
-    font-size: 10px;
-    transition: background 0.3s;
-}
-
-.minigame-button:hover {
-    background: #2980b9;
-}
-
-.minigame-button:active {
-    background: #21618c;
-}
-
-.minigame-progress-container {
-    width: 100%;
-    height: 20px;
-    background: #333;
-    border-radius: 10px;
-    overflow: hidden;
-    margin: 10px 0;
-}
-
-.minigame-progress-bar {
-    height: 100%;
-    background: #2ecc71;
-    width: 0%;
-    transition: width 0.3s;
-}
-
-.instructions {
-    text-align: center;
-    margin-bottom: 10px;
-    font-size: 12px;
-    color: #ccc;
-}
-
-
-/* Minigame disabled state */
-.minigame-disabled {
-    pointer-events: none !important;
-}
-
-/* Biometric scanner visual feedback */
-.biometric-scanner-success {
-    border: 2px solid #00ff00 !important;
-}
-
-/* Close button for minigames */
-.minigame-close-button {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    width: 30px;
-    height: 30px;
-    background: #e74c3c;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    font-family: 'Press Start 2P', monospace;
-    font-size: 18px;
-    font-weight: bold;
-    z-index: 10000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.3s ease;
-}
-
-.minigame-close-button:hover {
-    background: #c0392b;
-}
-
-.minigame-close-button:active {
-    background: #a93226;
-}
-
-/* Progress bar styling for dusting minigame */
-.minigame-progress-container {
-    width: 100%;
-    height: 10px;
-    background: #333;
-    border-radius: 5px;
-    overflow: hidden;
-    margin-top: 5px;
-}
-
-.minigame-progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, #2ecc71, #27ae60);
-    transition: width 0.3s ease;
-    border-radius: 5px;
-}
-
-
diff --git a/css/modals.css b/css/modals.css
index cc4eb23..f49d0b4 100644
--- a/css/modals.css
+++ b/css/modals.css
@@ -21,7 +21,7 @@
 .password-modal-content {
     background: #222;
     color: #fff;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     padding: 32px 24px 24px 24px;
     min-width: 320px;
     box-shadow: 0 0 20px #000;
@@ -41,7 +41,7 @@
     font-size: 20px;
     font-family: 'VT323', monospace;
     padding: 8px 12px;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     border: 1px solid #444;
     background: #111;
     color: #fff;
@@ -67,7 +67,7 @@
 }
 
 .password-modal-checkbox-label {
-    font-size: 14px;
+    font-size: 18px;
     font-family: 'VT323', monospace;
     color: #aaa;
     cursor: pointer;
@@ -79,10 +79,10 @@
 }
 
 .password-modal-button {
-    font-size: 16px;
+    font-size: 18px;
     font-family: 'Press Start 2P';
     border: none;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     padding: 8px 18px;
     cursor: pointer;
 }
@@ -118,7 +118,7 @@
 .modal-content {
     background: #222;
     color: white;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     padding: 24px;
     max-width: 90%;
     max-height: 90%;
@@ -137,7 +137,7 @@
 
 .modal-body {
     font-family: 'VT323', monospace;
-    font-size: 16px;
+    font-size: 18px;
     line-height: 1.4;
     margin-bottom: 16px;
 }
@@ -149,10 +149,10 @@
 }
 
 .modal-button {
-    font-size: 14px;
+    font-size: 18px;
     font-family: 'Press Start 2P';
     border: none;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     padding: 8px 16px;
     cursor: pointer;
     transition: background-color 0.2s;
diff --git a/css/notes.css b/css/notes.css
index bf3e8c0..b6962db 100644
--- a/css/notes.css
+++ b/css/notes.css
@@ -37,14 +37,19 @@
 /* Game container */
 .notes-minigame-game-container {
     width: 100%;
-    max-width: min(90vw, 90vh * (165/205)); /* Scale based on smaller dimension */
     position: relative;
-    margin: 0 auto; /* Centered with no top margin */
+    margin: 0 auto;
+    overflow: hidden; /* Crop sides on narrow screens */
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
 }
 
 /* Notepad background container */
 .notes-minigame-notepad {
-    width: 100%;
+    /* Allow shrinkage but set a reasonable minimum to prevent working area from being too small */
+    min-width: 450px;
+    width: min(90vw, 90vh * (165/205)); /* Scale based on smaller dimension */
     aspect-ratio: 165 / 205; /* Match notepad image dimensions */
     background-image: url('../assets/mini-games/notepad.png');
     background-size: contain;
@@ -65,7 +70,6 @@
     right: 0;
     bottom: 0;
     padding: 2% 12% 8% 18%;
-    font-family: 'Courier New', monospace;
     font-size: 18px;
     line-height: 1.5;
     color: #333;
@@ -169,7 +173,6 @@
     white-space: pre-wrap;
     word-wrap: break-word;
     color: #333;
-    font-family: 'VT323', monospace;
 }
 
 /* Observation container */
@@ -252,8 +255,7 @@
     border: 4px solid #555;
     background: rgba(0,0,0,0.7);
     color: white;
-    font-size: 14px;
-    font-family: 'VT323', monospace;
+    font-size: 18px;
     width: 200px;
     margin-right: 10px;
 }
@@ -265,8 +267,7 @@
     border: 4px solid #7f8c8d;
     padding: 8px 15px;
     cursor: pointer;
-    font-size: 14px;
-    font-weight: bold;
+    font-size: 18px;
     transition: background-color 0.3s ease;
 }
 
@@ -277,7 +278,7 @@
 /* Note counter */
 .notes-minigame-counter {
     color: white;
-    font-size: 14px;
+    font-size: 18px;
     display: flex;
     align-items: center;
     padding: 8px 15px;
@@ -326,8 +327,7 @@
     border: 4px solid #27ae60;
     padding: 8px 16px;
     cursor: pointer;
-    font-size: 14px;
-    font-family: 'VT323', monospace;
+    font-size: 18px;
 }
 
 .notes-minigame-save-btn:hover {
@@ -340,8 +340,7 @@
     border: 4px solid #7f8c8d;
     padding: 8px 16px;
     cursor: pointer;
-    font-size: 14px;
-    font-family: 'VT323', monospace;
+    font-size: 18px;
 }
 
 .notes-minigame-cancel-btn:hover {
diff --git a/css/notifications.css b/css/notifications.css
index 4f842e9..642d181 100644
--- a/css/notifications.css
+++ b/css/notifications.css
@@ -49,7 +49,7 @@
 .notification-title {
     font-weight: bold;
     margin-bottom: 5px;
-    font-size: 16px;
+    font-size: 18px;
 }
 
 .notification-message {
@@ -63,7 +63,7 @@
     top: 10px;
     right: 10px;
     cursor: pointer;
-    font-size: 16px;
+    font-size: 18px;
     color: #aaa;
 }
 
diff --git a/css/panels.css b/css/panels.css
index 986c0ee..d7c7b93 100644
--- a/css/panels.css
+++ b/css/panels.css
@@ -57,7 +57,7 @@
     border: none;
     background-color: #222;
     color: white;
-    font-size: 14px;
+    font-size: 18px;
 }
 
 #bluetooth-search:focus {
@@ -76,7 +76,7 @@
     padding: 5px 10px;
     margin-right: 5px;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 18px;
     transition: all 0.2s;
 }
 
@@ -98,7 +98,7 @@
 .bluetooth-device {
     background-color: #333;
     border: 1px solid #444;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     padding: 10px;
     margin-bottom: 8px;
     cursor: pointer;
@@ -122,7 +122,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 14px;
+    font-size: 18px;
     font-weight: bold;
     margin-bottom: 5px;
 }
@@ -134,12 +134,12 @@
 }
 
 .bluetooth-device-icon {
-    font-size: 12px;
+    font-size: 18px;
 }
 
 .bluetooth-device-details {
     display: none;
-    font-size: 12px;
+    font-size: 18px;
     color: #ccc;
     margin-top: 8px;
     white-space: pre-line;
@@ -150,7 +150,7 @@
 }
 
 .bluetooth-device-timestamp {
-    font-size: 10px;
+    font-size: 18px;
     color: #888;
     margin-top: 5px;
     text-align: right;
@@ -172,7 +172,7 @@
 .bluetooth-signal-bar {
     width: 3px;
     background-color: #666;
-    border-radius: 1px;
+    /* border-radius: 1px; */
     transition: all 0.2s;
 }
 
@@ -187,7 +187,7 @@
 .bluetooth-signal-bar:nth-child(5) { height: 16px; }
 
 .bluetooth-signal-text {
-    font-size: 10px;
+    font-size: 18px;
     color: #aaa;
 }
 
@@ -259,7 +259,7 @@
     border: none;
     background-color: #222;
     color: white;
-    font-size: 14px;
+    font-size: 18px;
 }
 
 #biometrics-search:focus {
@@ -278,7 +278,7 @@
     padding: 5px 10px;
     margin-right: 5px;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 18px;
     transition: all 0.2s;
 }
 
@@ -299,7 +299,7 @@
     background-color: #2c3e50;
     color: white;
     padding: 20px;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     width: 320px;
     max-height: 400px;
@@ -325,9 +325,9 @@
     background-color: #3498db;
     color: white;
     border: none;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     cursor: pointer;
-    font-size: 14px;
+    font-size: 18px;
 }
 
 .bluetooth-scan-btn:hover {
@@ -348,7 +348,7 @@
     background-color: #34495e;
     margin-bottom: 8px;
     padding: 10px;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -365,21 +365,21 @@
 }
 
 .device-address {
-    font-size: 12px;
+    font-size: 18px;
     color: #bdc3c7;
     font-family: monospace;
 }
 
 .device-signal {
-    font-size: 12px;
+    font-size: 18px;
     color: #f39c12;
     margin-left: 10px;
 }
 
 .device-status {
-    font-size: 10px;
+    font-size: 18px;
     padding: 2px 6px;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     margin-left: 10px;
 }
 
@@ -398,7 +398,7 @@
     background-color: #2c3e50;
     color: white;
     padding: 20px;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     width: 320px;
     max-height: 400px;
@@ -419,7 +419,7 @@
 .panel-section h4 {
     color: #3498db;
     margin-bottom: 10px;
-    font-size: 14px;
+    font-size: 18px;
     border-bottom: 1px solid #34495e;
     padding-bottom: 5px;
 }
@@ -428,7 +428,7 @@
     background-color: #34495e;
     margin-bottom: 10px;
     padding: 12px;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     border-left: 4px solid #27ae60;
 }
 
@@ -446,17 +446,17 @@
 }
 
 .sample-type {
-    font-size: 12px;
+    font-size: 18px;
     color: #bdc3c7;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .sample-quality {
-    font-size: 12px;
+    font-size: 18px;
     font-weight: bold;
     padding: 2px 6px;
-    border-radius: 3px;
+    /* border-radius: 3px; */
 }
 
 .sample-quality.quality-perfect {
@@ -485,12 +485,12 @@
 }
 
 .sample-date {
-    font-size: 10px;
+    font-size: 18px;
     color: #7f8c8d;
 }
 
 #scanner-status {
-    font-size: 12px;
+    font-size: 18px;
     color: #bdc3c7;
 }
 
@@ -549,7 +549,7 @@
     cursor: pointer;
     transition: transform 0.2s, opacity 0.2s;
     background: rgba(0, 0, 0, 0.7);
-    border-radius: 8px;
+    /* border-radius: 8px; */
     padding: 8px;
     border: 2px solid #444;
 }
@@ -573,7 +573,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
+    font-size: 18px;
     font-weight: bold;
     font-family: 'Press Start 2P', monospace;
     border: 2px solid #fff;
@@ -590,14 +590,14 @@
 .bluetooth-panel::-webkit-scrollbar-track,
 .biometric-panel::-webkit-scrollbar-track {
     background: #34495e;
-    border-radius: 4px;
+    /* border-radius: 4px; */
 }
 
 .notes-panel::-webkit-scrollbar-thumb,
 .bluetooth-panel::-webkit-scrollbar-thumb,
 .biometric-panel::-webkit-scrollbar-thumb {
     background: #555;
-    border-radius: 4px;
+    /* border-radius: 4px; */
 }
 
 .notes-panel::-webkit-scrollbar-thumb:hover,
diff --git a/css/password-minigame.css b/css/password-minigame.css
index 160c2eb..8e9a2cc 100644
--- a/css/password-minigame.css
+++ b/css/password-minigame.css
@@ -19,7 +19,44 @@
 .monitor-bezel {
     background: #666;
     border: 8px solid #444;
-    border-radius: 15px;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
     padding: 20px;
     box-shadow: 
         inset 0 0 20px rgba(0, 0, 0, 0.5),
@@ -46,13 +83,13 @@
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.4);
-    border-radius: 7px;
+    /* border-radius: 7px; */
     z-index: 1;
 }
 
 .monitor-screen {
     border: 2px solid #333;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     padding: 15px;
     min-height: 180px;
     position: relative;
@@ -79,7 +116,7 @@
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 255, 0.1));
-    border-radius: 6px;
+    /* border-radius: 6px; */
     z-index: 1;
 }
 
@@ -89,7 +126,7 @@
 }
 
 .password-input-container label {
-    font-size: 12px;
+    /* font-size: 12px; */
     color: #00ff00;
     margin-bottom: 5px;
 }
@@ -105,10 +142,9 @@
     padding: 12px 45px 12px 12px;
     background: #1a1a1a;
     border: 2px solid #00ff00;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     color: white;
-    font-family: 'Press Start 2P', monospace;
-    font-size: 10px;
+    font-size: 18px;
     outline: none;
     transition: border-color 0.3s ease;
 }
@@ -133,7 +169,7 @@
     cursor: pointer;
     font-size: 16px;
     padding: 5px;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     transition: background-color 0.3s ease;
 }
 
@@ -152,10 +188,9 @@
     color: white;
     border: none;
     padding: 8px 16px;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     cursor: pointer;
-    font-family: 'Press Start 2P', monospace;
-    font-size: 8px;
+    font-size: 18px;
     transition: background 0.3s ease;
     align-self: flex-start;
 }
@@ -167,23 +202,23 @@
 .password-hint {
     background: rgba(243, 156, 18, 0.1);
     border: 1px solid #f39c12;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     padding: 10px;
-    font-size: 10px;
+    font-size: 18px;
     color: #f39c12;
 }
 
 .postit-note {
     background: #ffff88;
     border: 1px solid #ddd;
-    border-radius: 3px;
+    /* border-radius: 3px; */
     padding: 15px;
     margin: 10px 0;
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
     position: relative;
     transform: rotate(-2deg);
-    font-family: 'Press Start 2P', monospace;
-    font-size: 8px;
+    font-family: 'Pixelify Sans', 'Comic Sans MS', cursive;
+    font-size: 18px;
     color: #333;
     max-width: 200px;
     word-wrap: break-word;
@@ -258,7 +293,7 @@
     gap: 5px;
     background: #2a2a2a;
     border: 2px solid #444;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     padding: 10px;
     margin: 10px 0;
     position: relative;
@@ -276,11 +311,10 @@
     background: #444;
     color: white;
     border: 1px solid #666;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     padding: 8px 12px;
     cursor: pointer;
-    font-family: 'Press Start 2P', monospace;
-    font-size: 8px;
+    font-size: 18px;
     min-width: 35px;
     text-align: center;
     transition: all 0.2s ease;
@@ -355,10 +389,9 @@
     color: white;
     border: none;
     padding: 12px 24px;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     cursor: pointer;
-    font-family: 'Press Start 2P', monospace;
-    font-size: 10px;
+    font-size: 18px;
     transition: background 0.3s ease;
     position: relative;
     z-index: 11;
@@ -377,10 +410,9 @@
     color: white;
     border: none;
     padding: 12px 24px;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     cursor: pointer;
-    font-family: 'Press Start 2P', monospace;
-    font-size: 10px;
+    font-size: 18px;
     transition: background 0.3s ease;
     position: relative;
     z-index: 11;
@@ -396,11 +428,11 @@
 
 .attempts-counter {
     text-align: center;
-    font-size: 10px;
+    font-size: 18px;
     color: #f39c12;
     background: rgba(243, 156, 18, 0.1);
     border: 1px solid #f39c12;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     padding: 8px;
     margin-top: 10px;
     position: relative;
@@ -437,12 +469,12 @@
     }
     
     .password-field {
-        font-size: 9px;
+        font-size: 18px;
         padding: 10px 40px 10px 10px;
     }
     
     .submit-btn, .cancel-btn {
         padding: 10px 20px;
-        font-size: 9px;
+        font-size: 18px;
     }
 }
diff --git a/css/phone.css b/css/phone.css
index 06381dd..73a6815 100644
--- a/css/phone.css
+++ b/css/phone.css
@@ -7,11 +7,47 @@
     max-width: 400px;
     margin: 0 auto;
     background: #a0a0ad;
-    border-radius: 20px;
-    border: 3px solid #333;
+    border: 4px solid #333;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
     box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
-    overflow: hidden;
-    font-family: 'Courier New', monospace;
+    font-family: 'VT323', monospace;
 }
 
 .phone-screen {
@@ -22,8 +58,8 @@
     position: relative;
     color: #000;
     margin: 10px;
-    border-radius: 15px;
-    border: 2px solid #333;
+    overflow: hidden;
+    clip-path: polygon(0px calc(100% - 10px), 2px calc(100% - 10px), 2px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 2px), 10px calc(100% - 2px), 10px 100%, calc(100% - 10px) 100%, calc(100% - 10px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 10px), 100% calc(100% - 10px), 100% 10px, calc(100% - 2px) 10px, calc(100% - 2px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 2px, calc(100% - 10px) 2px, calc(100% - 10px) 0px, 10px 0px, 10px 2px, 6px 2px, 6px 4px, 4px 4px, 4px 6px, 2px 6px, 2px 10px, 0px 10px) !important;
 }
 
 .phone-header {
@@ -32,8 +68,9 @@
     align-items: center;
     padding: 10px 15px;
     background: rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid #333;
+    border-bottom: 2px solid #333;
     color: #000;
+    flex-shrink: 0;
 }
 
 .signal-bars {
@@ -45,7 +82,7 @@
 .signal-bars .bar {
     width: 3px;
     background: #000;
-    border-radius: 1px;
+    /* border-radius: 1px; */
 }
 
 .signal-bars .bar:nth-child(1) { height: 4px; }
@@ -55,16 +92,23 @@
 
 .battery {
     color: #000;
-    font-size: 10px;
-    font-family: 'Courier New', monospace;
+    /* font-size: 10px; */
+    font-family: 'VT323', monospace;
     font-weight: bold;
 }
 
 .messages-list {
     flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 10px;
     color: #000;
+    scrollbar-width: none;
+    cursor: grab;
+}
+
+.messages-list::-webkit-scrollbar {
+    display: none;
 }
 
 .message-item {
@@ -73,8 +117,8 @@
     padding: 12px;
     margin-bottom: 8px;
     background: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 8px;
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    /* border-radius: 8px; */
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
@@ -103,17 +147,17 @@
 .message-sender {
     font-weight: bold;
     color: #000;
-    font-size: 12px;
+    /* font-size: 18px; */
     margin-bottom: 4px;
-    font-family: 'Courier New', monospace;
+    font-family: 'VT323', monospace;
 }
 
 .message-text {
     color: #333;
-    font-size: 11px;
+    /* font-size: 11px; */
     line-height: 1.3;
     margin-bottom: 4px;
-    font-family: 'Courier New', monospace;
+    font-family: 'VT323', monospace;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -121,8 +165,8 @@
 
 .message-time {
     color: #666;
-    font-size: 10px;
-    font-family: 'Courier New', monospace;
+    /* font-size: 10px; */
+    font-family: 'VT323', monospace;
 }
 
 .message-status {
@@ -147,8 +191,8 @@
     justify-content: center;
     height: 200px;
     color: #666;
-    font-size: 12px;
-    font-family: 'Courier New', monospace;
+    font-size: 18px;
+    font-family: 'VT323', monospace;
 }
 
 .message-detail {
@@ -157,6 +201,12 @@
     flex-direction: column;
     padding: 15px;
     color: #000;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    cursor: grab;
+}
+.message-detail::-webkit-scrollbar {
+    display: none;
 }
 
 .message-header {
@@ -164,18 +214,18 @@
     align-items: center;
     margin-bottom: 15px;
     padding-bottom: 10px;
-    border-bottom: 1px solid #333;
+    border-bottom: 2px solid #333;
 }
 
 .back-btn {
     background: #333;
     color: #5fcf69;
-    border: 1px solid #555;
+    border: 2px solid #555;
     padding: 8px 12px;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     cursor: pointer;
-    font-family: 'Courier New', monospace;
-    font-size: 11px;
+    font-family: 'VT323', monospace;
+    /* font-size: 11px; */
     margin-right: 15px;
     transition: all 0.3s ease;
     font-weight: bold;
@@ -195,30 +245,33 @@
     display: block;
     color: #000;
     font-weight: bold;
-    font-size: 14px;
+    /* font-size: 18px; */
     margin-bottom: 4px;
-    font-family: 'Courier New', monospace;
+    font-family: 'VT323', monospace;
 }
 
 .timestamp {
     color: #666;
-    font-size: 11px;
-    font-family: 'Courier New', monospace;
+    /* font-size: 11px; */
+    font-family: 'VT323', monospace;
 }
 
 .message-content {
     flex: 1;
     background: rgba(0, 0, 0, 0.1);
     padding: 15px;
-    border-radius: 8px;
-    border: 1px solid #333;
     color: #000;
-    font-size: 12px;
     line-height: 1.5;
-    font-family: 'Courier New', monospace;
+    font-family: 'VT323', monospace;
     white-space: pre-wrap;
     overflow-y: auto;
+    overflow-x: hidden;
     margin-bottom: 15px;
+    scrollbar-width: none;
+}
+
+.message-content::-webkit-scrollbar {
+    display: none;
 }
 
 /* Voice message display styling */
@@ -236,48 +289,43 @@
     cursor: pointer;
     transition: transform 0.2s ease;
     padding: 5px;
-    border-radius: 8px;
+    /* border-radius: 8px; */
 }
 
 .audio-controls:hover {
-    transform: scale(1.25);
+    transform: scale(1.5);
     background: rgba(0, 0, 0, 0.1);
 }
 
 .audio-sprite {
     height: 32px;
     width: auto;
-    image-rendering: pixelated;
+    image-rendering: pixelated !important;
     image-rendering: -moz-crisp-edges;
     image-rendering: crisp-edges;
     image-rendering: -webkit-optimize-contrast;
-    filter: contrast(1.2) saturate(1.1);
 }
 
 .play-button {
-    background: #5fcf69;
     color: #000;
-    border-radius: 50%;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 14px;
     font-weight: bold;
-    font-family: 'Courier New', monospace;
-    border: 2px solid #333;
+    font-family: 'VT323', monospace;
 }
 
 .transcript {
     text-align: center;
     background: rgba(0, 0, 0, 0.1);
     padding: 10px;
-    border-radius: 5px;
-    border: 1px solid #333;
+    /* border-radius: 5px; */
+    border: 2px solid #333;
     width: 100%;
-    font-family: 'Courier New', monospace;
-    font-size: 11px;
+    font-family: 'VT323', monospace;
+    /* font-size: 11px; */
     line-height: 1.4;
 }
 
@@ -291,7 +339,7 @@
     margin-top: 20px;
     padding: 15px;
     background: #f0f0f0;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     border: 2px solid #333;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -299,17 +347,17 @@
 .observations-content h4 {
     margin: 0 0 8px 0;
     color: #000;
-    font-size: 12px;
+    /* font-size: 18px; */
     font-weight: bold;
-    font-family: 'Courier New', monospace;
+    font-family: 'VT323', monospace;
 }
 
 .observations-content p {
     margin: 0;
     color: #000;
-    font-size: 11px;
+    /* font-size: 11px; */
     line-height: 1.4;
-    font-family: 'Courier New', monospace;
+    font-family: 'VT323', monospace;
 }
 
 .message-actions {
@@ -324,18 +372,18 @@
     gap: 15px;
     padding: 15px;
     background: rgba(0, 0, 0, 0.1);
-    border-top: 1px solid #333;
+    border-top: 2px solid #333;
 }
 
 .control-btn {
     background: #333;
     color: #5fcf69;
-    border: 1px solid #555;
+    border: 2px solid #555;
     padding: 10px 15px;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     cursor: pointer;
-    font-family: 'Courier New', monospace;
-    font-size: 11px;
+    font-family: 'VT323', monospace;
+    /* font-size: 11px; */
     transition: all 0.3s ease;
     min-width: 80px;
     font-weight: bold;
@@ -363,14 +411,14 @@
 /* Voice playback note styling */
 .voice-note {
     color: #666 !important;
-    font-size: 10px !important;
+    /* font-size: 10px !important; */
     text-align: center !important;
     margin-top: 10px !important;
     font-family: 'Courier New', monospace !important;
     background: rgba(0, 0, 0, 0.1);
     padding: 5px;
-    border-radius: 3px;
-    border: 1px solid #333;
+    /* border-radius: 3px; */
+    border: 2px solid #333;
 }
 
 /* Voice controls styling */
@@ -382,8 +430,8 @@
     padding: 10px 15px;
     background: rgba(0, 0, 0, 0.1);
     border-top: 1px solid #333;
-    font-family: 'Courier New', monospace;
-    font-size: 11px;
+    font-family: 'VT323', monospace;
+    /* font-size: 11px; */
 }
 
 .voice-controls label {
@@ -394,11 +442,11 @@
 .voice-select {
     background: #333;
     color: #5fcf69;
-    border: 1px solid #555;
+    border: 2px solid #555;
     padding: 5px 8px;
-    border-radius: 4px;
-    font-family: 'Courier New', monospace;
-    font-size: 10px;
+    /* border-radius: 4px; */
+    font-family: 'VT323', monospace;
+    /* font-size: 10px; */
     min-width: 200px;
     cursor: pointer;
     font-weight: bold;
@@ -421,27 +469,3 @@
     padding: 5px;
     font-weight: bold;
 }
-
-
-/* Scrollbar styling for phone interface */
-.messages-list::-webkit-scrollbar,
-.message-content::-webkit-scrollbar {
-    width: 6px;
-}
-
-.messages-list::-webkit-scrollbar-track,
-.message-content::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
-}
-
-.messages-list::-webkit-scrollbar-thumb,
-.message-content::-webkit-scrollbar-thumb {
-    background: #333;
-    border-radius: 3px;
-}
-
-.messages-list::-webkit-scrollbar-thumb:hover,
-.message-content::-webkit-scrollbar-thumb:hover {
-    background: #555;
-}
diff --git a/css/pin.css b/css/pin.css
index a05e8f5..e252f94 100644
--- a/css/pin.css
+++ b/css/pin.css
@@ -7,11 +7,7 @@
 }
 
 .pin-minigame-game-container {
-    background: linear-gradient(145deg, #0f0f23, #1a1a2e);
-    border: 1px solid #0f3460;
-    box-shadow: 
-        0 0 20px rgba(0, 0, 0, 0.8) inset,
-        0 0 10px rgba(15, 52, 96, 0.2);
+    background: #55616e !important;
     padding: 20px;
     display: flex;
     flex-direction: column;
@@ -38,13 +34,13 @@
 }
 
 .pin-minigame-display {
-    font-family: 'Courier New', monospace;
+    font-family: 'Press Start 2P', monospace;
     font-size: 48px;
     font-weight: bold;
     color: #00ff41;
     background: #000;
     border: 3px solid #00ff41;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     padding: 15px 25px;
     text-align: center;
     letter-spacing: 8px;
@@ -99,9 +95,47 @@
     width: 100%;
     max-width: 300px;
     padding: 20px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 15px;
-    border: 1px solid #0f3460;
+
+    background: slategray;
+
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
 }
 
 /* Special positioning for zero button (centered in bottom row) */
@@ -126,10 +160,10 @@
     background: linear-gradient(145deg, #2c3e50, #34495e);
     color: #ecf0f1;
     border: 2px solid #0f3460;
-    border-radius: 8px;
+    /* border-radius: 8px; */
     padding: 15px;
-    font-family: 'Press Start 2P', monospace;
-    font-size: 18px;
+    font-family: 'Press Start 2P', monospace !important;
+    font-size: 20px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -139,7 +173,7 @@
     justify-content: center;
     box-shadow: 
         0 4px 8px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        inset 0 2px 0 rgba(255, 255, 255, 0.1);
 }
 
 .pin-minigame-key:hover {
@@ -148,7 +182,7 @@
     box-shadow: 
         0 6px 12px rgba(0, 0, 0, 0.4),
         0 0 15px rgba(0, 255, 65, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        inset 0 2px 0 rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
 }
 
@@ -156,7 +190,7 @@
     transform: translateY(0);
     box-shadow: 
         0 2px 4px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        inset 0 2px 0 rgba(255, 255, 255, 0.1);
 }
 
 .pin-minigame-key:disabled {
@@ -170,14 +204,14 @@
     border-color: #0f3460;
     box-shadow: 
         0 4px 8px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        inset 0 2px 0 rgba(255, 255, 255, 0.1);
 }
 
 /* Special key styles */
 .pin-minigame-backspace {
     background: linear-gradient(145deg, #e74c3c, #c0392b);
     border-color: #c0392b;
-    font-size: 16px;
+    font-size: 20px;
 }
 
 .pin-minigame-backspace:hover {
@@ -186,7 +220,7 @@
     box-shadow: 
         0 6px 12px rgba(0, 0, 0, 0.4),
         0 0 15px rgba(255, 68, 68, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        inset 0 2px 0 rgba(255, 255, 255, 0.2);
 }
 
 .pin-minigame-enter {
@@ -201,7 +235,7 @@
     box-shadow: 
         0 6px 12px rgba(0, 0, 0, 0.4),
         0 0 15px rgba(0, 255, 65, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        inset 0 2px 0 rgba(255, 255, 255, 0.2);
 }
 
 /* Attempts Log */
@@ -209,9 +243,48 @@
     width: 100%;
     max-width: 350px;
     background: rgba(0, 0, 0, 0.4);
-    border: 1px solid #0f3460;
-    border-radius: 10px;
     padding: 15px;
+
+    background: slategray;
+
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
 }
 
 .pin-minigame-attempts-title {
@@ -235,21 +308,21 @@
     align-items: center;
     gap: 10px;
     padding: 8px 12px;
-    border-radius: 6px;
-    font-family: 'Courier New', monospace;
-    font-size: 14px;
+    /* border-radius: 6px; */
+    font-family: 'Press Start 2P', monospace;
+    font-size: 18px;
     transition: all 0.3s ease;
 }
 
 .pin-minigame-attempt.correct {
-    background: rgba(0, 255, 0, 0.1);
-    border: 1px solid rgba(0, 255, 0, 0.3);
+    background: rgba(0, 255, 0, 0.3);
+    border: 2px solid rgba(0, 255, 0, 0.3);
     color: #00ff00;
 }
 
 .pin-minigame-attempt.incorrect {
-    background: rgba(255, 68, 68, 0.1);
-    border: 1px solid rgba(255, 68, 68, 0.3);
+    background: rgba(255, 68, 68, 0.3);
+    border: 2px solid rgba(255, 68, 68, 0.3);
     color: #ff4444;
 }
 
@@ -284,8 +357,8 @@
     gap: 10px;
     padding: 10px;
     background: rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-    border: 1px solid #0f3460;
+    /* border-radius: 8px; */
+    border: 2px solid #0f3460;
 }
 
 .pin-minigame-toggle-label {
@@ -333,7 +406,7 @@
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    border: 2px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 }
 
@@ -374,7 +447,7 @@
     }
     
     .pin-minigame-key {
-        font-size: 16px;
+        font-size: 20px;
         padding: 12px;
         min-height: 45px;
     }
@@ -408,7 +481,7 @@
     }
     
     .pin-minigame-key {
-        font-size: 14px;
+        font-size: 18px;
         padding: 10px;
         min-height: 40px;
     }
@@ -431,12 +504,12 @@
 
 .pin-minigame-attempts-log::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
+    /* border-radius: 3px; */
 }
 
 .pin-minigame-attempts-log::-webkit-scrollbar-thumb {
     background: #0f3460;
-    border-radius: 3px;
+    /* border-radius: 3px; */
 }
 
 .pin-minigame-attempts-log::-webkit-scrollbar-thumb:hover {
diff --git a/css/text-file-minigame.css b/css/text-file-minigame.css
index 9bfa450..f0c9d84 100644
--- a/css/text-file-minigame.css
+++ b/css/text-file-minigame.css
@@ -9,11 +9,47 @@
     flex-direction: column;
     height: 100%;
     background: #ffffff;
-    border-radius: 12px;
-    border: 1px solid #d1d5db;
+    border: 4px solid #d1d5db;
+    clip-path: polygon(
+      0px calc(100% - 10px),
+      2px calc(100% - 10px),
+      2px calc(100% - 6px),
+      4px calc(100% - 6px),
+      4px calc(100% - 4px),
+      6px calc(100% - 4px),
+      6px calc(100% - 2px),
+      10px calc(100% - 2px),
+      10px 100%,
+      calc(100% - 10px) 100%,
+      calc(100% - 10px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 10px),
+      100% calc(100% - 10px),
+      100% 10px,
+      calc(100% - 2px) 10px,
+      calc(100% - 2px) 6px,
+      calc(100% - 4px) 6px,
+      calc(100% - 4px) 4px,
+      calc(100% - 6px) 4px,
+      calc(100% - 6px) 2px,
+      calc(100% - 10px) 2px,
+      calc(100% - 10px) 0px,
+      10px 0px,
+      10px 2px,
+      6px 2px,
+      6px 4px,
+      4px 4px,
+      4px 6px,
+      2px 6px,
+      2px 10px,
+      0px 10px
+    );
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     overflow: hidden;
-    font-family: 'VT323', monospace;
 }
 
 /* Mac-style Window Title Bar */
@@ -24,7 +60,6 @@
     padding: 8px 12px;
     background: linear-gradient(to bottom, #f6f6f6 0%, #e8e8e8 100%);
     border-bottom: 1px solid #d1d5db;
-    border-radius: 12px 12px 0 0;
     min-height: 28px;
 }
 
@@ -37,7 +72,6 @@
 .window-control {
     width: 12px;
     height: 12px;
-    border-radius: 50%;
     border: none;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -76,7 +110,7 @@
     align-items: center;
     padding: 16px 20px;
     background: #f8f9fa;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 2px solid #e9ecef;
 }
 
 .file-icon {
@@ -94,22 +128,20 @@
     font-weight: bold;
     color: #212529;
     margin-bottom: 4px;
-    font-family: 'VT323', monospace;
 }
 
 .file-meta {
     display: flex;
     gap: 12px;
-    font-size: 14px;
+    font-size: 18px;
     color: #6c757d;
-    font-family: 'VT323', monospace;
 }
 
 .file-type {
     background: #e9ecef;
     padding: 2px 8px;
-    border-radius: 4px;
-    border: 1px solid #dee2e6;
+    /* border-radius: 4px; */
+    border: 2px solid #dee2e6;
     color: #495057;
 }
 
@@ -132,15 +164,14 @@
     align-items: center;
     padding: 8px 16px;
     background: #f8f9fa;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 2px solid #e9ecef;
     min-height: 36px;
 }
 
 .content-label {
-    font-size: 14px;
+    font-size: 18px;
     color: #495057;
     font-weight: 500;
-    font-family: 'VT323', monospace;
 }
 
 .content-actions {
@@ -150,13 +181,12 @@
 
 .action-btn {
     background: #ffffff;
-    border: 1px solid #d1d5db;
+    border: 2px solid #d1d5db;
     color: #374151;
     padding: 4px 12px;
-    border-radius: 6px;
-    font-size: 12px;
+    /* border-radius: 6px; */
+    font-size: 18px;
     cursor: pointer;
-    font-family: 'VT323', monospace;
     transition: all 0.2s ease;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -185,8 +215,7 @@
 
 .file-text {
     color: #000000;
-    font-family: 'VT323', monospace;
-    font-size: 16px;
+    font-size: 20px;
     line-height: 1.5;
     margin: 0;
     white-space: pre-wrap;
@@ -195,6 +224,7 @@
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
+    min-height: 300px;
 }
 
 /* File Observations Section */
@@ -207,18 +237,16 @@
 
 .file-observations h4 {
     color: #856404;
-    font-size: 14px;
+    font-size: 18px;
     margin: 0 0 8px 0;
-    font-family: 'VT323', monospace;
     font-weight: bold;
 }
 
 .file-observations p {
     color: #6c5700;
-    font-size: 14px;
+    font-size: 18px;
     line-height: 1.4;
     margin: 0;
-    font-family: 'VT323', monospace;
 }
 
 /* Text Selection Styling */
@@ -239,12 +267,12 @@
 
 .file-content::-webkit-scrollbar-track {
     background: #f1f5f9;
-    border-radius: 6px;
+    /* border-radius: 6px; */
 }
 
 .file-content::-webkit-scrollbar-thumb {
     background: #cbd5e1;
-    border-radius: 6px;
+    /* border-radius: 6px; */
     border: 2px solid #f1f5f9;
 }
 
@@ -259,7 +287,7 @@
 /* Responsive Design */
 @media (max-width: 768px) {
     .text-file-container {
-        border-radius: 8px;
+        /* border-radius: 8px; */
     }
     
     .text-file-window-header {
@@ -274,7 +302,7 @@
     }
     
     .window-title {
-        font-size: 12px;
+        font-size: 18px;
         margin: 0 15px;
     }
     
@@ -283,11 +311,11 @@
     }
     
     .file-name {
-        font-size: 16px;
+        font-size: 20px;
     }
     
     .file-meta {
-        font-size: 12px;
+        font-size: 18px;
         gap: 8px;
     }
     
@@ -297,7 +325,7 @@
     }
     
     .content-label {
-        font-size: 12px;
+        font-size: 18px;
     }
     
     .action-btn {
@@ -310,7 +338,7 @@
     }
     
     .file-text {
-        font-size: 14px;
+        font-size: 18px;
     }
     
     .file-observations {
@@ -318,11 +346,11 @@
     }
     
     .file-observations h4 {
-        font-size: 12px;
+        font-size: 18px;
     }
     
     .file-observations p {
-        font-size: 12px;
+        font-size: 18px;
     }
 }
 
diff --git a/css/utilities.css b/css/utilities.css
index 3fde6e5..79b9e7a 100644
--- a/css/utilities.css
+++ b/css/utilities.css
@@ -177,4 +177,79 @@
 
 .shadow-error {
     box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
-} 
\ No newline at end of file
+}
+
+/* Pixel Art Corner Utilities */
+.pixel-corners {
+  clip-path: polygon(
+    0px calc(100% - 10px),
+    2px calc(100% - 10px),
+    2px calc(100% - 6px),
+    4px calc(100% - 6px),
+    4px calc(100% - 4px),
+    6px calc(100% - 4px),
+    6px calc(100% - 2px),
+    10px calc(100% - 2px),
+    10px 100%,
+    calc(100% - 10px) 100%,
+    calc(100% - 10px) calc(100% - 2px),
+    calc(100% - 6px) calc(100% - 2px),
+    calc(100% - 6px) calc(100% - 4px),
+    calc(100% - 4px) calc(100% - 4px),
+    calc(100% - 4px) calc(100% - 6px),
+    calc(100% - 2px) calc(100% - 6px),
+    calc(100% - 2px) calc(100% - 10px),
+    100% calc(100% - 10px),
+    100% 10px,
+    calc(100% - 2px) 10px,
+    calc(100% - 2px) 6px,
+    calc(100% - 4px) 6px,
+    calc(100% - 4px) 4px,
+    calc(100% - 6px) 4px,
+    calc(100% - 6px) 2px,
+    calc(100% - 10px) 2px,
+    calc(100% - 10px) 0px,
+    10px 0px,
+    10px 2px,
+    6px 2px,
+    6px 4px,
+    4px 4px,
+    4px 6px,
+    2px 6px,
+    2px 10px,
+    0px 10px
+  );
+}
+
+/* For rendering icons that are 16px by 16px */
+.icon {
+  width: 32px;
+  height: 32px;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  vertical-align: middle;
+  /* margin-right: 4px; */
+}
+
+/* For rendering icons that are 8px by 8px */
+.icon-small {
+  width: 16px;
+  height: 16px;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  vertical-align: middle;
+  /* margin-right: 4px; */
+}
+
+/* For rendering icons that are 32px by 32px */
+.icon-large {
+  width: 64px;
+  height: 64px;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  vertical-align: middle;
+  /* margin-right: 4px; */
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 35bf7c5..b837468 100644
--- a/index.html
+++ b/index.html
@@ -5,18 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
     <title>Break Escape Game</title>
     
-    <!-- Google Fonts - Press Start 2P, VT323 -->
+    <!-- Google Fonts - Press Start 2P, VT323, Pixelify Sans -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
     
     <!-- Web Font Loader script to ensure fonts load properly -->
     <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
     <script>
       WebFont.load({
         google: {
-          families: ['Press Start 2P', 'VT323']
+          families: ['Press Start 2P', 'VT323', 'Pixelify Sans']
         },
         active: function() {
           console.log('Fonts loaded successfully');
@@ -41,7 +42,7 @@
     <link rel="stylesheet" href="css/container-minigame.css">
     <link rel="stylesheet" href="css/phone.css">
     <link rel="stylesheet" href="css/pin.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/password-minigame.css">
     <link rel="stylesheet" href="css/text-file-minigame.css">
     
diff --git a/js/minigames/biometrics/biometrics-minigame.js b/js/minigames/biometrics/biometrics-minigame.js
index c5b9f8c..1cda404 100644
--- a/js/minigames/biometrics/biometrics-minigame.js
+++ b/js/minigames/biometrics/biometrics-minigame.js
@@ -81,7 +81,7 @@ export class BiometricsMinigame extends MinigameScene {
         searchRoomContainer.className = 'biometrics-search-room-container';
         searchRoomContainer.innerHTML = `
             <button id="search-room-btn" class="biometrics-action-btn">
-                <span class="btn-icon">🔍</span>
+                <span class="btn-icon"><img src="assets/icons/search.png" alt="Search" class="icon"></span>
                 <span class="btn-text">Search Room for Fingerprints</span>
             </button>
         `;
diff --git a/js/minigames/bluetooth/bluetooth-scanner-minigame.js b/js/minigames/bluetooth/bluetooth-scanner-minigame.js
index 50d5853..8d944c3 100644
--- a/js/minigames/bluetooth/bluetooth-scanner-minigame.js
+++ b/js/minigames/bluetooth/bluetooth-scanner-minigame.js
@@ -490,15 +490,15 @@ export class BluetoothScannerMinigame extends MinigameScene {
                     deviceContent += `</div></div>`;
                 } else if (device.nearby) {
                     // Fallback if signal strength not available
-                    deviceContent += `<span class="bluetooth-device-icon">📶</span>`;
+                    deviceContent += `<span class="bluetooth-device-icon"><img src="assets/icons/signal.png" alt="Signal" class="icon"></span>`;
                 }
 
                 if (device.saved) {
-                    deviceContent += `<span class="bluetooth-device-icon">💾</span>`;
+                    deviceContent += `<span class="bluetooth-device-icon"><img src="assets/icons/disk.png" alt="Disk" class="icon"></span>`;
                 }
                 
                 if (device.inInventory) {
-                    deviceContent += `<span class="bluetooth-device-icon">🎒</span>`;
+                    deviceContent += `<span class="bluetooth-device-icon"><img src="assets/icons/backpack.png" alt="Backpack" class="icon"></span>`;
                 }
 
                 deviceContent += `</div></div>`;
diff --git a/js/minigames/framework/base-minigame.js b/js/minigames/framework/base-minigame.js
index 315a7b9..f9a872c 100644
--- a/js/minigames/framework/base-minigame.js
+++ b/js/minigames/framework/base-minigame.js
@@ -53,6 +53,11 @@ export class MinigameScene {
         } else {
             console.log('Cancel button not found');
         }
+
+        // hide the header if the params.headerElement is empty
+        if (!this.params.headerElement) {
+            this.headerElement.style.display = 'none';
+        }
     }
     
     start() {
diff --git a/js/minigames/lockpick/lockpick-set-minigame.js b/js/minigames/lockpick/lockpick-set-minigame.js
index 8bbc584..33ec8a5 100644
--- a/js/minigames/lockpick/lockpick-set-minigame.js
+++ b/js/minigames/lockpick/lockpick-set-minigame.js
@@ -51,7 +51,7 @@ export class LockpickSetMinigame extends MinigameScene {
         searchRoomContainer.className = 'lockpick-search-room-container';
         searchRoomContainer.innerHTML = `
             <button id="search-locks-btn" class="lockpick-action-btn">
-                <span class="btn-icon">🔍</span>
+                <span class="btn-icon"><img src="assets/icons/search.png" alt="Search" class="icon"></span>
                 <span class="btn-text">Search for Pickable Locks</span>
             </button>
         `;
diff --git a/js/minigames/notes/notes-minigame.js b/js/minigames/notes/notes-minigame.js
index 58911ee..85b3288 100644
--- a/js/minigames/notes/notes-minigame.js
+++ b/js/minigames/notes/notes-minigame.js
@@ -52,29 +52,30 @@ export class NotesMinigame extends MinigameScene {
         // Refresh collected notes to ensure we have the latest data
         this.collectedNotes = this.getCollectedNotes();
         console.log("Collected notes:", this.collectedNotes);
-        
-        // Set container dimensions to take up most of the screen
-        this.container.className += ' notes-minigame-container';
-        
-                // Clear header content
-                this.headerElement.innerHTML = '';
-        
-        // Configure game container with notepad background - scaled to fill most of the screen
+
+        // Clear header content
+        this.headerElement.innerHTML = '';
+
+        // Configure game container - it's just a sizing wrapper
         this.gameContainer.className += ' notes-minigame-game-container';
-        
+
+        // Create notepad container with background
+        const notepadContainer = document.createElement('div');
+        notepadContainer.className = 'notes-minigame-notepad';
+
         // Create content area
         const contentArea = document.createElement('div');
         contentArea.className = 'notes-minigame-content-area';
-        
+
                 // Create text box container to look like it's stuck in a binder
                 const textBox = document.createElement('div');
                 textBox.className = 'notes-minigame-text-box';
-                
+
                 // Add celotape effect
                 const celotape = document.createElement('div');
                 celotape.className = 'notes-minigame-celotape';
                 textBox.appendChild(celotape);
-        
+
         // Add binder holes effect
         const binderHoles = document.createElement('div');
         binderHoles.className = 'notes-minigame-binder-holes';
@@ -114,32 +115,32 @@ export class NotesMinigame extends MinigameScene {
         textBox.appendChild(noteText);
         
         contentArea.appendChild(textBox);
-        
+
                 // Add observation text if available - handwritten directly on the page
                 if (this.observationText) {
                     const observationContainer = document.createElement('div');
                     observationContainer.className = 'notes-minigame-observation-container';
-                    
+
                     const observationDiv = document.createElement('div');
                     observationDiv.className = 'notes-minigame-observation';
                     observationDiv.innerHTML = this.observationText;
                     observationDiv.style.cursor = 'pointer'; // Make it clear it's clickable
                     observationDiv.title = 'Click to edit observations';
                     observationDiv.addEventListener('click', () => this.editObservations(observationDiv));
-                    
+
                     // Add edit button
                     const editBtn = document.createElement('button');
                     editBtn.className = 'notes-minigame-edit-btn';
                     editBtn.title = 'Edit observations';
-                    
+
                     // Add pencil icon
                     const pencilIcon = document.createElement('img');
                     pencilIcon.src = 'assets/icons/pencil.png';
                     pencilIcon.alt = 'Edit';
                     editBtn.appendChild(pencilIcon);
-                    
+
                     editBtn.addEventListener('click', () => this.editObservations(observationDiv));
-                    
+
                     observationContainer.appendChild(observationDiv);
                     observationContainer.appendChild(editBtn);
                     contentArea.appendChild(observationContainer);
@@ -147,40 +148,34 @@ export class NotesMinigame extends MinigameScene {
                     // Add empty observation area with edit button
                     const observationContainer = document.createElement('div');
                     observationContainer.className = 'notes-minigame-observation-container';
-                    
+
                     const observationDiv = document.createElement('div');
                     observationDiv.className = 'notes-minigame-observation empty';
                     observationDiv.innerHTML = '<em>Click edit to add your observations...</em>';
                     observationDiv.style.cursor = 'pointer'; // Make it clear it's clickable
                     observationDiv.title = 'Click to add observations';
                     observationDiv.addEventListener('click', () => this.editObservations(observationDiv));
-                    
+
                     // Add edit button
                     const editBtn = document.createElement('button');
                     editBtn.className = 'notes-minigame-edit-btn';
                     editBtn.title = 'Add observations';
-                    
+
                     // Add pencil icon
                     const pencilIcon = document.createElement('img');
                     pencilIcon.src = 'assets/icons/pencil.png';
                     pencilIcon.alt = 'Edit';
                     editBtn.appendChild(pencilIcon);
-                    
+
                     editBtn.addEventListener('click', () => this.editObservations(observationDiv));
-                    
+
                     observationContainer.appendChild(observationDiv);
                     observationContainer.appendChild(editBtn);
                     contentArea.appendChild(observationContainer);
                 }
-        
-        // Create notepad container
-        const notepadContainer = document.createElement('div');
-        notepadContainer.className = 'notes-minigame-notepad';
-        
-        // Add content area to notepad container
+
+        // Add content area to notepad container, then notepad container to game container
         notepadContainer.appendChild(contentArea);
-        
-        // Add notepad container to game container
         this.gameContainer.appendChild(notepadContainer);
         
         // Create navigation buttons container (only if navigation is not hidden)
@@ -199,20 +194,20 @@ export class NotesMinigame extends MinigameScene {
                 
                 const prevBtn = document.createElement('button');
                 prevBtn.className = 'minigame-button notes-minigame-nav-button';
-                prevBtn.textContent = '← Previous';
+                prevBtn.textContent = '< Previous';
                 prevBtn.addEventListener('click', () => this.navigateToNote(-1));
                 navContainer.appendChild(prevBtn);
                 
                 const nextBtn = document.createElement('button');
                 nextBtn.className = 'minigame-button notes-minigame-nav-button';
-                nextBtn.textContent = 'Next →';
+                nextBtn.textContent = 'Next >';
                 nextBtn.addEventListener('click', () => this.navigateToNote(1));
                 navContainer.appendChild(nextBtn);
                 
                 // Add note counter
                 const noteCounter = document.createElement('div');
                 noteCounter.className = 'notes-minigame-counter';
-                noteCounter.textContent = `${this.currentNoteIndex + 1} / ${this.collectedNotes.length}`;
+                noteCounter.textContent = `${this.currentNoteIndex + 1}/${this.collectedNotes.length}`;
                 navContainer.appendChild(noteCounter);
                 
                 this.container.appendChild(navContainer);
@@ -439,13 +434,13 @@ export class NotesMinigame extends MinigameScene {
             
             const prevBtn = document.createElement('button');
             prevBtn.className = 'minigame-button notes-minigame-nav-button';
-            prevBtn.textContent = '← Previous';
+            prevBtn.textContent = '< Previous';
             prevBtn.addEventListener('click', () => this.navigateToNote(-1));
             navContainer.appendChild(prevBtn);
             
             const nextBtn = document.createElement('button');
             nextBtn.className = 'minigame-button notes-minigame-nav-button';
-            nextBtn.textContent = 'Next →';
+            nextBtn.textContent = 'Next >';
             nextBtn.addEventListener('click', () => this.navigateToNote(1));
             navContainer.appendChild(nextBtn);
             
diff --git a/js/minigames/phone/phone-messages-minigame.js b/js/minigames/phone/phone-messages-minigame.js
index 794187c..4a397fa 100644
--- a/js/minigames/phone/phone-messages-minigame.js
+++ b/js/minigames/phone/phone-messages-minigame.js
@@ -328,7 +328,7 @@ export class PhoneMessagesMinigame extends MinigameScene {
             const notebookBtn = document.createElement('button');
             notebookBtn.className = 'minigame-button';
             notebookBtn.id = 'minigame-notebook';
-            notebookBtn.innerHTML = '📝 Add to Notebook';
+            notebookBtn.innerHTML = '<img src="assets/icons/notebook.png" alt="Notebook" class="icon"> Add to Notebook';
             this.controlsElement.appendChild(notebookBtn);
             
             // Change cancel button text to "Close"
@@ -532,6 +532,62 @@ export class PhoneMessagesMinigame extends MinigameScene {
         this.addEventListener(document, 'keydown', (event) => {
             this.handleKeyPress(event);
         });
+        
+        // Set up drag-to-scroll for scrollable elements
+        this.setupDragToScroll(this.messagesList);
+        this.setupDragToScroll(this.messageDetail);
+    }
+    
+    setupDragToScroll(scrollableElement) {
+        if (!scrollableElement) return;
+        
+        let isPressed = false;
+        let startY = 0;
+        let scrollTop = 0;
+        
+        const onMouseDown = (e) => {
+            // Don't start drag if clicking on interactive elements
+            if (e.target.closest('button, a, input, select, [role="button"]')) {
+                return;
+            }
+            
+            isPressed = true;
+            startY = e.pageY - scrollableElement.offsetTop;
+            scrollTop = scrollableElement.scrollTop;
+            scrollableElement.style.cursor = 'grabbing';
+            e.preventDefault();
+        };
+        
+        const onMouseMove = (e) => {
+            if (!isPressed) return;
+            
+            const y = e.pageY - scrollableElement.offsetTop;
+            const deltaY = startY - y;
+            scrollableElement.scrollTop = scrollTop + deltaY;
+        };
+        
+        const onMouseUp = () => {
+            isPressed = false;
+            scrollableElement.style.cursor = 'grab';
+        };
+        
+        const onMouseLeave = () => {
+            isPressed = false;
+            scrollableElement.style.cursor = 'grab';
+        };
+        
+        // Add hover effect to show the grab cursor
+        scrollableElement.addEventListener('mouseenter', () => {
+            if (!isPressed) {
+                scrollableElement.style.cursor = 'grab';
+            }
+        });
+        
+        scrollableElement.addEventListener('mouseleave', onMouseLeave);
+        
+        this.addEventListener(scrollableElement, 'mousedown', onMouseDown);
+        this.addEventListener(document, 'mousemove', onMouseMove);
+        this.addEventListener(document, 'mouseup', onMouseUp);
     }
     
     handleKeyPress(event) {
@@ -576,7 +632,7 @@ export class PhoneMessagesMinigame extends MinigameScene {
             this.messageContent.innerHTML = `
                 <div class="voice-message-display">
                     <div class="audio-controls">
-                        <div class="play-button">▶</div>
+                        <div class="play-button"><img src="assets/icons/play.png" alt="Audio" class="icon"></div>
                         <img src="assets/mini-games/audio.png" alt="Audio" class="audio-sprite">
                     </div>
                     <div class="transcript"><strong>Transcript:</strong><br>${message.voice || message.text || 'No transcript available'}
@@ -781,7 +837,7 @@ export class PhoneMessagesMinigame extends MinigameScene {
         
         // Check if speech synthesis is available
         if (!this.speechAvailable || !this.phoneData.speechSynthesis) {
-            this.showFailure("Voice playback not available on this system. Text is displayed above.", false, 3000);
+            this.showFailure("Voice playback not available on this system. Transcript is displayed.", false, 3000);
             return;
         }
         
diff --git a/js/minigames/text-file/text-file-minigame.js b/js/minigames/text-file/text-file-minigame.js
index c41fe5e..e07a81f 100644
--- a/js/minigames/text-file/text-file-minigame.js
+++ b/js/minigames/text-file/text-file-minigame.js
@@ -23,7 +23,7 @@ export class TextFileMinigame extends MinigameScene {
         
         // Customize the header
         this.headerElement.innerHTML = `
-            <h3>📄 ${this.textFileData.fileName}</h3>
+            <h3><img src="assets/icons/text-file.png" alt="Document" class="icon"> ${this.textFileData.fileName}</h3>
             <p>Viewing text file contents</p>
         `;
         
@@ -32,7 +32,7 @@ export class TextFileMinigame extends MinigameScene {
             const notebookBtn = document.createElement('button');
             notebookBtn.className = 'minigame-button';
             notebookBtn.id = 'minigame-notebook';
-            notebookBtn.innerHTML = '📝 Add to Notebook';
+            notebookBtn.innerHTML = '<img src="assets/icons/notes-sm.png" alt="Notebook" class="icon-small"> Add to Notebook';
             this.controlsElement.appendChild(notebookBtn);
             
             // Change cancel button text to "Close"
@@ -64,7 +64,7 @@ export class TextFileMinigame extends MinigameScene {
                 </div>
                 
                 <div class="file-header">
-                    <div class="file-icon">📄</div>
+                    <div class="file-icon"><img src="assets/objects/text_file.png" alt="Document" class="icon-large"></div>
                     <div class="file-info">
                         <div class="file-name">${this.textFileData.fileName}</div>
                         <div class="file-meta">
@@ -76,9 +76,8 @@ export class TextFileMinigame extends MinigameScene {
                 
                 <div class="file-content-area">
                     <div class="content-header">
-                        <span class="content-label">File Contents:</span>
                         <div class="content-actions">
-                            <button class="action-btn" id="copy-btn" title="Copy to clipboard">📋 Copy</button>
+                            <button class="action-btn" id="copy-btn" title="Copy to clipboard"><img src="assets/icons/copy-sm.png" alt="Clipboard" class="icon-small"> Copy</button>
                             <button class="action-btn" id="select-all-btn" title="Select all text">Select All</button>
                         </div>
                     </div>
@@ -89,7 +88,7 @@ export class TextFileMinigame extends MinigameScene {
                 
                 ${this.textFileData.observations ? `
                 <div class="file-observations">
-                    <h4>📋 Observations:</h4>
+                    <h4><img src="assets/icons/copy-sm.png" alt="Clipboard" class="icon-small"> Observations:</h4>
                     <p>${this.textFileData.observations}</p>
                 </div>
                 ` : ''}
diff --git a/test-auto-desktop.html b/test-auto-desktop.html
index bf9a83a..27f6200 100644
--- a/test-auto-desktop.html
+++ b/test-auto-desktop.html
@@ -7,7 +7,7 @@
     
     <!-- Include the game's CSS -->
     <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/container-minigame.css">
     <link rel="stylesheet" href="css/notifications.css">
     
diff --git a/test-container-desktop.html b/test-container-desktop.html
index 503c8e2..f18997a 100644
--- a/test-container-desktop.html
+++ b/test-container-desktop.html
@@ -7,7 +7,7 @@
     
     <!-- Include the game's CSS -->
     <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/container-minigame.css">
     <link rel="stylesheet" href="css/notifications.css">
     
diff --git a/test-container-interactive-items.html b/test-container-interactive-items.html
index 6c9880c..4117ca3 100644
--- a/test-container-interactive-items.html
+++ b/test-container-interactive-items.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Container Interactive Items Test</title>
     <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/text-file-minigame.css">
     <style>
         body {
diff --git a/test-container-simple.html b/test-container-simple.html
index c307bf3..3d9339d 100644
--- a/test-container-simple.html
+++ b/test-container-simple.html
@@ -7,7 +7,7 @@
     
     <!-- Include the game's CSS -->
     <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/container-minigame.css">
     <link rel="stylesheet" href="css/notifications.css">
     
diff --git a/test-password-minigame.html b/test-password-minigame.html
index a0421d0..ff02733 100644
--- a/test-password-minigame.html
+++ b/test-password-minigame.html
@@ -7,7 +7,7 @@
     
     <!-- Include the game's CSS -->
     <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/password-minigame.css">
     <link rel="stylesheet" href="css/notifications.css">
     
diff --git a/test-phone-minigame.html b/test-phone-minigame.html
index 23ec78b..34e2d36 100644
--- a/test-phone-minigame.html
+++ b/test-phone-minigame.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Phone Messages Minigame Test</title>
     <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/phone.css">
     <style>
         body {
diff --git a/test-pin-minigame.html b/test-pin-minigame.html
index c62d1e2..8a9a30b 100644
--- a/test-pin-minigame.html
+++ b/test-pin-minigame.html
@@ -10,7 +10,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Courier+New&display=swap" rel="stylesheet">
     
     <!-- Load CSS -->
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/pin.css">
     
     <style>
diff --git a/test-text-file-minigame.html b/test-text-file-minigame.html
index 087de35..bf19312 100644
--- a/test-text-file-minigame.html
+++ b/test-text-file-minigame.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Text File Minigame Test</title>
     <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/text-file-minigame.css">
     <style>
         body {
diff --git a/verify-css.html b/verify-css.html
index d1b0955..028643f 100644
--- a/verify-css.html
+++ b/verify-css.html
@@ -7,7 +7,7 @@
     
     <!-- Include the game's CSS -->
     <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/minigames.css">
+    <link rel="stylesheet" href="css/minigames-framework.css">
     <link rel="stylesheet" href="css/password-minigame.css">
     <link rel="stylesheet" href="css/notifications.css">