body{ background-color:#0a0f1f; color:white; font-family:sans-serif; margin:0; padding:20px; }
button{ user-select:none; cursor:pointer; transition:0.1s; }
h1{ font-size:clamp(32px,6vw,60px); margin:0; text-shadow:0 0 5px #00ffff; }

.title-area{ display:flex; align-items:center; gap:20px; margin-bottom:20px; flex-wrap:wrap; }

.button-area{ display:flex; gap:30px; overflow-x:auto; padding:20px 20px 40px; }

/* 一覧の鍵ボタン（元デザイン） */
.tile{
  flex:0 0 auto; width:100px; height:350px;
  writing-mode:vertical-rl; text-orientation:upright; font-size:40px;
  background-color:#001f5c; color:white;
  border:3px solid #00ffff; border-radius:20px;
  box-shadow:0 15px #003b8e, 0 0 20px #00ffff; text-shadow:0 0 3px #00ffff;
  position:relative;
}
.tile.big{ width:300px; height:420px; font-size:80px; }
.tile:hover{ background-color:#003399; transform:translateY(10px); box-shadow:0 10px #003b8e, 0 0 12px #00ffff; }
.tile:active{ background-color:#001a4d; transform:translateY(20px); box-shadow:0 0 #003b8e, 0 0 8px #00ffff; }
.tile.out{ background-color:#5c0010; border-color:#ff5577; box-shadow:0 15px #8e0020, 0 0 20px #ff5577; }
.tile .badge{ position:absolute; bottom:8px; left:0; right:0; font-size:16px; writing-mode:horizontal-tb; text-align:center; }

.home-btn{
  width:180px; height:60px; font-size:24px;
  background-color:#006400; color:white; border:3px solid #00ff00; border-radius:10px;
  box-shadow:0 6px #008000, 0 0 20px #00ff00; text-shadow:0 0 3px #00ff00;
}
.home-btn:hover{ background-color:#34c759; transform:translateY(3px); box-shadow:0 3px #1e7e34; }
.home-btn:active{ background-color:#218838; transform:translateY(6px); box-shadow:0 0 #1e7e34; }

/* 個別の鍵ページ */
.detail{ text-align:center; padding-top:30px; }
.detail h1{ margin-bottom:30px; }
.detail input{ width:300px; max-width:90%; height:40px; font-size:20px; margin-bottom:20px; text-align:center; }
.key-btn{ display:block; margin:0 auto; width:300px; max-width:90%; height:150px; font-size:30px; border:none; border-radius:15px; color:white; }
.available{ background-color:#4CAF50; }
.borrowed{ background-color:#f44336; }
.user{ font-size:30px; margin:20px 0; font-weight:bold; min-height:36px; }
.msg{ color:#ffcc00; min-height:24px; }
.history{ margin:30px auto; max-width:600px; text-align:left; font-size:16px; }
.history li{ margin:4px 0; }

/* ログイン画面 */
.login{ max-width:420px; margin:0 auto; }
.login-label{ display:block; font-size:24px; margin-bottom:16px; text-shadow:0 0 3px #00ffff; }
.login input{ background:#001f5c; color:white; border:3px solid #00ffff; border-radius:10px; box-shadow:0 0 15px #00ffff; letter-spacing:0.4em; font-size:32px; height:60px; width:260px; }
.login-btn{ display:block; margin:10px auto 0; }
.logout-btn{ margin-top:30px; }