.land { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; display: flex; flex-direction: column; gap: 26px; }
.land-head { display: flex; align-items: center; gap: 14px; }
.land-head .hanko { width: 56px; height: 56px; font-size: 34px; }
.land-head .title { font-size: 30px; }
.join-panel h1, .host-panel h2 { font: 32px/1 var(--display); margin: 0 0 14px; }
.host-panel h3 { font: 20px/1 var(--display); margin: 26px 0 10px; }
.code-input { font: 40px/1 var(--display) !important; letter-spacing: .3em; text-transform: uppercase; text-align: center; min-height: 66px !important; }
.join-panel .btn { min-height: 66px; font-size: 18px; padding: 0 26px; }
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .games { grid-template-columns: 1fr; } }
.game-card {
  text-align: left; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  background: var(--panel); border: var(--b) solid var(--ink); box-shadow: var(--lift) var(--lift) 0 var(--ink); padding: 16px; color: var(--ink);
  transition: transform .06s, box-shadow .06s;
}
.game-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--accent); }
.game-card:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.gc-kanji { grid-row: span 2; width: 58px; height: 58px; display: grid; place-items: center; background: var(--accent); color: #fff; font: 34px/1 var(--display); transform: rotate(-4deg); }
.gc-name { font: 22px/1.1 var(--display); }
.gc-desc { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.rooms { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.room-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--paper-2); flex-wrap: wrap; }
.rr-code { font: 26px/1 var(--display); letter-spacing: .1em; min-width: 92px; }
.rr-kind { font-weight: 900; }
.tools { margin-top: 18px; border: 2px solid var(--ink); padding: 10px 14px; background: var(--paper); }
.tools summary { font-weight: 900; cursor: pointer; }
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .media-row { grid-template-columns: 1fr; } }
.media-box { border: 2px solid var(--ink); background: var(--panel); padding: 10px; }
.mb-label { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mb-preview { min-height: 90px; display: grid; place-items: center; margin: 8px 0; }
.mb-preview img { max-width: 100%; max-height: 140px; border: 2px solid var(--ink); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }