/* Starter-tower corridor: door tags over the 3D doors, the unit-door and lift postcards, the lift-ride doors.
   Same island-paper tokens as island.css. */

/* name / lock tags over your door and friends' doors (CSS2D, iso/hall.js) */
.hall-tag { display: flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(251, 243, 228, .94); color: var(--ui-text, #794F27);
  font: 800 11px var(--font); white-space: nowrap; box-shadow: 0 2px 0 rgba(189, 174, 160, .9), 0 3px 8px rgba(61, 52, 40, .16); pointer-events: none; }
.hall-tag img { width: 18px; height: 18px; object-fit: contain; }
.hall-tag b { font-weight: 900; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.hall-tag i { width: 8px; height: 8px; border-radius: 50%; background: #C6BBAA; }
.hall-tag.home i { background: #6FBA2C; box-shadow: 0 0 0 2px rgba(111, 186, 44, .25); }
.hall-tag.mine { background: #FBE1E7; color: #A8385C; box-shadow: 0 2px 0 #E9A3B6, 0 3px 8px rgba(61, 52, 40, .16); }

/* postcard frame: airmail stripes around the paper */
.sign.postcard { border: 7px solid transparent; background: linear-gradient(var(--ui-paper), var(--ui-paper)) padding-box,
  repeating-linear-gradient(-45deg, #EF8FA6 0 12px, #FFF9EE 12px 22px, #4FB9AA 22px 34px, #FFF9EE 34px 44px) border-box; }
.sign.postcard .sign-body { position: relative; }

/* unit door card */
.door-sign { width: min(470px, 96vw); }
.door-card { display: flex; gap: 16px; align-items: stretch; padding: 6px 0 2px; }
.door-pic { position: relative; flex: 0 0 104px; display: grid; place-items: center; border-radius: 22px; background: var(--ui-bg, #FFF9EE); box-shadow: inset 0 0 0 2px var(--ui-line, #E6D3B3); padding: 10px 6px 26px; }
.door-pic img { width: 76px; height: 76px; object-fit: contain; }
.door-pic b { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: #D9B45E; color: #3B2E17; font: 900 13px var(--font); padding: 1px 10px; border-radius: 8px; box-shadow: 0 2px 0 #B8923F; }
.door-card.mine .door-pic { background: #FBE1E7; box-shadow: inset 0 0 0 2px #F2A9BC; }
.door-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.door-info .note { margin: 0; }
.door-lock { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ui-text, #794F27); }
.door-lock img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.door-who { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--ui-muted, #9F927D); }
.door-who i { width: 10px; height: 10px; border-radius: 50%; background: #C6BBAA; }
.door-who.home { color: #4E8A1E; } .door-who.home i { background: #6FBA2C; box-shadow: 0 0 0 3px rgba(111, 186, 44, .22); }
.door-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.door-btns button { min-width: 96px; padding: 10px 18px !important; font-size: 15px !important; }

/* lift floor picker */
.lift-sign { width: min(560px, 96vw); }
.lift-sign .lift-mine { margin: 4px 0 10px !important; background: #F2A9BC !important; box-shadow: 0 4px 0 0 #D97B95 !important; color: #fff; }
.lift-sign .lift-mine:disabled { background: var(--ui-paper3) !important; box-shadow: none !important; color: var(--ui-muted); }
.lift-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.sign .lift-b { padding: 0 !important; height: 40px; border-radius: 14px !important; font: 900 15px var(--font) !important; background: var(--ui-bg, #FFF9EE) !important; color: var(--ui-text, #794F27) !important; box-shadow: 0 3px 0 0 var(--ui-btn3d, #BDAEA0) !important; position: relative; }
.sign .lift-b:hover { background: #fff !important; }
.sign .lift-b.lobby { background: var(--ui-ribbon, #1E6E64) !important; color: #FFF6E3 !important; box-shadow: 0 3px 0 0 var(--ui-ribbon2, #155850) !important; }
.sign .lift-b.mine { background: #FBE1E7 !important; color: #A8385C !important; box-shadow: 0 3px 0 0 #E9A3B6 !important; }
.sign .lift-b.mine::after { content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #E8678A; }
.sign .lift-b.here, .sign .lift-b:disabled { background: var(--ui-teal, #19C8B9) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(25, 200, 185, .25) !important; opacity: 1; cursor: default; }
@media (max-height: 520px) and (orientation: landscape) {
  .lift-grid { grid-template-columns: repeat(14, 1fr); gap: 5px; }
  .sign .lift-b { height: 32px; font-size: 13px !important; border-radius: 10px !important; }
  .door-pic { flex-basis: 84px; } .door-pic img { width: 56px; height: 56px; }
}

/* riding the lift: two brushed-steel doors close over the screen, then open on the new floor */
#lift-fx { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
#lift-fx i { position: absolute; top: 0; bottom: 0; width: 50.5%; transition: transform .4s cubic-bezier(.5, 0, .3, 1);
  background: linear-gradient(90deg, #C9CFD7, #E9EDF2 40%, #D5DBE2 60%, #BFC6CF), #D5DBE2; box-shadow: inset 0 0 0 3px rgba(120, 130, 145, .35); }
#lift-fx i:first-child { left: 0; transform: translateX(-102%); border-right: 2px solid #9AA3AE; }
#lift-fx i:nth-child(2) { right: 0; transform: translateX(102%); border-left: 2px solid #9AA3AE; }
#lift-fx b { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -10px); opacity: 0; transition: opacity .25s, transform .25s; min-width: 74px; text-align: center;
  padding: 6px 16px; border-radius: 14px; background: #34333A; color: #7FE3D3; font: 900 30px var(--font); text-shadow: 0 0 10px rgba(127, 227, 211, .7); box-shadow: 0 4px 0 #1F1E24; }
#lift-fx.shut { pointer-events: auto; }
#lift-fx.shut i { transform: none; }
#lift-fx.shut b { opacity: 1; transform: translate(-50%, 0); transition-delay: .3s; }