diff --git a/index.html b/index.html
index 37d4af0..c05b66b 100644
--- a/index.html
+++ b/index.html
@@ -1,44 +1,62 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Javascript Tetris</title>
+  <title>Javascript Tetris - 2 Player</title>
   <style>
-    body      { font-family: Helvetica, sans-serif; }
-    #tetris   { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; }
-    #stats    { display: inline-block; vertical-align: top; }
-    #canvas   { display: inline-block; vertical-align: top; background: url(texture.jpg); box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
-    #menu     { display: inline-block; vertical-align: top; position: relative; }
-    #menu p   { margin: 0.5em 0; text-align: center; }
-    #menu p a { text-decoration: none; color: black; }
-    #upcoming { display: block; margin: 0 auto; background-color: #E0E0E0; }
-    #score    { color: red; font-weight: bold; vertical-align: middle; }
-    #rows     { color: blue; font-weight: bold; vertical-align: middle; }
-    #stats    { position: absolute; bottom: 0em; right: 1em; }
-    @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
-    @media screen and (min-width: 400px) and (min-height: 400px)  { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width:  75px; height:  75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
-    @media screen and (min-width: 500px) and (min-height: 500px)  { #tetris { font-size: 1.25em; width: 450px; } #menu { width: 200px; height: 400px; } #upcoming { width: 100px; height: 100px; } #canvas { width: 200px; height: 400px; } } /* 20px chunks */
-    @media screen and (min-width: 600px) and (min-height: 600px)  { #tetris { font-size: 1.50em; width: 550px; } #menu { width: 250px; height: 500px; } #upcoming { width: 125px; height: 125px; } #canvas { width: 250px; height: 500px; } } /* 25px chunks */
-    @media screen and (min-width: 700px) and (min-height: 700px)  { #tetris { font-size: 1.75em; width: 650px; } #menu { width: 300px; height: 600px; } #upcoming { width: 150px; height: 150px; } #canvas { width: 300px; height: 600px; } } /* 30px chunks */
-    @media screen and (min-width: 800px) and (min-height: 800px)  { #tetris { font-size: 2.00em; width: 750px; } #menu { width: 350px; height: 700px; } #upcoming { width: 175px; height: 175px; } #canvas { width: 350px; height: 700px; } } /* 35px chunks */
-    @media screen and (min-width: 900px) and (min-height: 900px)  { #tetris { font-size: 2.25em; width: 850px; } #menu { width: 400px; height: 800px; } #upcoming { width: 200px; height: 200px; } #canvas { width: 400px; height: 800px; } } /* 40px chunks */
+    body         { font-family: Helvetica, sans-serif; text-align: center; }
+    #tetris      { display: inline-block; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; margin-top: 1em; }
+    #boards      { white-space: nowrap; }
+    .menu        { display: inline-block; vertical-align: top; }
+    .menu p      { margin: 0.5em 0; text-align: center; }
+    .menu h3     { margin: 0.3em 0; text-align: center; }
+    .menu .keys  { font-size: 0.75em; color: #555; }
+    #canvas      { display: inline-block; vertical-align: top; background: url(texture.jpg); box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
+    .upcoming    { display: block; margin: 0 auto; background-color: #E0E0E0; }
+    .score       { color: red; font-weight: bold; vertical-align: middle; }
+    .rows        { color: blue; font-weight: bold; vertical-align: middle; }
+    .garbage     { color: #555; font-weight: bold; vertical-align: middle; }
+    #start       { margin-top: 1em; text-align: center; }
+    #start a     { text-decoration: none; color: black; }
+    #restart     { margin-top: 0.5em; text-align: center; }
+    #restart a   { text-decoration: none; color: #555; font-size: 0.85em; }
+    #restart a:hover { color: black; }
+    /* responsive breakpoints: each board = chunk*nx wide, chunk*ny tall, canvas = 2 boards + 40px gap + 1px sub-pixel headroom */
+    @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; } .menu { width: 100px; } .upcoming { width:  50px; height:  50px; } #canvas { width: 241px; height: 200px; } } /* 10px chunks */
+    @media screen and (min-width: 700px) and (min-height: 400px)  { #tetris { font-size: 1.00em; } .menu { width: 130px; } .upcoming { width:  75px; height:  75px; } #canvas { width: 341px; height: 300px; } } /* 15px chunks */
+    @media screen and (min-width: 900px) and (min-height: 500px)  { #tetris { font-size: 1.25em; } .menu { width: 150px; } .upcoming { width: 100px; height: 100px; } #canvas { width: 441px; height: 400px; } } /* 20px chunks */
+    @media screen and (min-width:1100px) and (min-height: 700px)  { #tetris { font-size: 1.50em; } .menu { width: 180px; } .upcoming { width: 125px; height: 125px; } #canvas { width: 641px; height: 600px; } } /* 30px chunks */
+    @media screen and (min-width:1400px) and (min-height: 900px)  { #tetris { font-size: 1.75em; } .menu { width: 200px; } .upcoming { width: 150px; height: 150px; } #canvas { width: 841px; height: 800px; } } /* 40px chunks */
   </style>
 </head>
 
 <body>
 
   <div id="tetris">
-    <div id="menu">
-      <p id="start"><a href="javascript:play();">Press Space to Play.</a></p>
-      <p><canvas id="upcoming"></canvas></p>
-      <p>score <span id="score">00000</span></p>
-      <p>rows <span id="rows">0</span></p>
+    <div id="boards">
+      <div class="menu" id="p1menu">
+        <h3>Player 1</h3>
+        <p class="keys">WASD</p>
+        <p><canvas class="upcoming" id="upcoming1"></canvas></p>
+        <p>score <span class="score" id="score1">00000</span></p>
+        <p>rows <span class="rows" id="rows1">0</span></p>
+        <p>incoming <span class="garbage" id="garbage1">0</span></p>
+      </div>
+      <canvas id="canvas">
+        Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
+      </canvas>
+      <div class="menu" id="p2menu">
+        <h3>Player 2</h3>
+        <p class="keys">Arrow Keys</p>
+        <p><canvas class="upcoming" id="upcoming2"></canvas></p>
+        <p>score <span class="score" id="score2">00000</span></p>
+        <p>rows <span class="rows" id="rows2">0</span></p>
+        <p>incoming <span class="garbage" id="garbage2">0</span></p>
+      </div>
     </div>
-    <canvas id="canvas">
-      Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
-    </canvas>
+    <p id="start"><a href="javascript:play();">Press Space to Play.</a></p>
+    <p id="restart" style="visibility:hidden;"><a href="javascript:play();">Restart</a></p>
   </div>
 
-  <script src="stats.js"></script>
   <script>
 
     //-------------------------------------------------------------------------
@@ -68,33 +86,24 @@
     // game constants
     //-------------------------------------------------------------------------
 
-    var KEY     = { ESC: 27, SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 },
+    var KEY     = { ESC: 27, SPACE: 32,
+                    LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40,
+                    A: 65, D: 68, W: 87, S: 83 },
         DIR     = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3, MIN: 0, MAX: 3 },
-        stats   = new Stats(),
         canvas  = get('canvas'),
         ctx     = canvas.getContext('2d'),
-        ucanvas = get('upcoming'),
-        uctx    = ucanvas.getContext('2d'),
         speed   = { start: 0.6, decrement: 0.005, min: 0.1 }, // how long before piece drops by 1 row (seconds)
         nx      = 10, // width of tetris court (in blocks)
         ny      = 20, // height of tetris court (in blocks)
-        nu      = 5;  // width/height of upcoming preview (in blocks)
+        nu      = 5,  // width/height of upcoming preview (in blocks)
+        boardGap = 40; // horizontal gap (in pixels) between the two boards on the shared canvas
 
     //-------------------------------------------------------------------------
     // game variables (initialized during reset)
     //-------------------------------------------------------------------------
 
-    var dx, dy,        // pixel size of a single tetris block
-        blocks,        // 2 dimensional array (nx*ny) representing tetris court - either empty block or occupied by a 'piece'
-        actions,       // queue of user actions (inputs)
-        playing,       // true|false - game is in progress
-        dt,            // time since starting this game
-        current,       // the current piece
-        next,          // the next piece
-        score,         // the current score
-        vscore,        // the currently displayed score (it catches up to score in small chunks - like a spinning slot machine)
-        rows,          // number of completed rows in the current game
-        step;          // how long before current piece drops by 1 row
+    var dx, dy,  // pixel size of a single tetris block
+        p1, p2;  // the two player state objects
 
     //-------------------------------------------------------------------------
     // tetris pieces
@@ -125,7 +134,7 @@
     // occupied block (x,y) for a given piece
     //------------------------------------------------
     function eachblock(type, x, y, dir, fn) {
-      var bit, result, row = 0, col = 0, blocks = type.blocks[dir];
+      var bit, row = 0, col = 0, blocks = type.blocks[dir];
       for(bit = 0x8000 ; bit > 0 ; bit = bit >> 1) {
         if (blocks & bit) {
           fn(x + col, y + row);
@@ -138,33 +147,63 @@
     }
 
     //-----------------------------------------------------
-    // check if a piece can fit into a position in the grid
+    // check if a piece can fit into a position in a player's grid
     //-----------------------------------------------------
-    function occupied(type, x, y, dir) {
-      var result = false
-      eachblock(type, x, y, dir, function(x, y) {
-        if ((x < 0) || (x >= nx) || (y < 0) || (y >= ny) || getBlock(x,y))
+    function occupied(p, type, x, y, dir) {
+      var result = false;
+      eachblock(type, x, y, dir, function(bx, by) {
+        if ((bx < 0) || (bx >= nx) || (by < 0) || (by >= ny) || getBlock(p, bx, by))
           result = true;
       });
       return result;
     }
 
-    function unoccupied(type, x, y, dir) {
-      return !occupied(type, x, y, dir);
+    function unoccupied(p, type, x, y, dir) {
+      return !occupied(p, type, x, y, dir);
     }
 
     //-----------------------------------------
-    // start with 4 instances of each piece and
-    // pick randomly until the 'bag is empty'
+    // each player keeps its own bag - start with 4
+    // instances of each piece and pick randomly
+    // until the 'bag is empty'
     //-----------------------------------------
-    var pieces = [];
-    function randomPiece() {
-      if (pieces.length == 0)
-        pieces = [i,i,i,i,j,j,j,j,l,l,l,l,o,o,o,o,s,s,s,s,t,t,t,t,z,z,z,z];
-      var type = pieces.splice(random(0, pieces.length-1), 1)[0];
+    function randomPiece(p) {
+      if (p.pieces.length == 0)
+        p.pieces = [i,i,i,i,j,j,j,j,l,l,l,l,o,o,o,o,s,s,s,s,t,t,t,t,z,z,z,z];
+      var type = p.pieces.splice(random(0, p.pieces.length-1), 1)[0];
       return { type: type, dir: DIR.UP, x: Math.round(random(0, nx - type.size)), y: 0 };
     }
 
+    //-------------------------------------------------------------------------
+    // PLAYER STATE
+    //-------------------------------------------------------------------------
+
+    function makePlayer(id, ucanvasId, scoreId, rowsId, garbageId) {
+      var uc = get(ucanvasId);
+      return {
+        id:         id,
+        offsetX:    0,            // set in resize() based on dx
+        ucanvas:    uc,
+        uctx:       uc.getContext('2d'),
+        scoreId:    scoreId,
+        rowsId:     rowsId,
+        garbageId:  garbageId,
+        blocks:     [],
+        actions:    [],
+        playing:    false,
+        dt:         0,
+        current:    null,
+        next:       null,
+        score:      0,
+        vscore:     0,
+        rows:       0,
+        step:       speed.start,
+        pendingGarbage: 0,
+        lastGarbageHole: -1,
+        pieces:     [],
+        invalid:    { court: true, next: true, score: true, rows: true, garbage: true }
+      };
+    }
 
     //-------------------------------------------------------------------------
     // GAME LOOP
@@ -172,7 +211,9 @@
 
     function run() {
 
-      showStats(); // initialize FPS counter
+      p1 = makePlayer(1, 'upcoming1', 'score1', 'rows1', 'garbage1');
+      p2 = makePlayer(2, 'upcoming2', 'score2', 'rows2', 'garbage2');
+
       addEvents(); // attach keydown and resize events
 
       var last = now = timestamp();
@@ -180,20 +221,15 @@
         now = timestamp();
         update(Math.min(1, (now - last) / 1000.0)); // using requestAnimationFrame have to be able to handle large delta's caused when it 'hibernates' in a background or non-visible tab
         draw();
-        stats.update();
         last = now;
         requestAnimationFrame(frame, canvas);
       }
 
-      resize(); // setup all our sizing information
-      reset();  // reset the per-game variables
-      frame();  // start the first frame
-
-    }
+      resize();  // setup all our sizing information
+      reset(p1); // reset the per-game variables for each player
+      reset(p2);
+      frame();   // start the first frame
 
-    function showStats() {
-      stats.domElement.id = 'stats';
-      get('menu').appendChild(stats.domElement);
     }
 
     function addEvents() {
@@ -202,25 +238,49 @@
     }
 
     function resize(event) {
-      canvas.width   = canvas.clientWidth;  // set canvas logical size equal to its physical size
-      canvas.height  = canvas.clientHeight; // (ditto)
-      ucanvas.width  = ucanvas.clientWidth;
-      ucanvas.height = ucanvas.clientHeight;
-      dx = canvas.width  / nx; // pixel size of a single tetris block
-      dy = canvas.height / ny; // (ditto)
-      invalidate();
-      invalidateNext();
+      canvas.width  = canvas.clientWidth;  // set canvas logical size equal to its physical size
+      canvas.height = canvas.clientHeight;
+      // canvas holds two boards separated by a fixed gap
+      dx = Math.floor((canvas.width - boardGap) / (2 * nx));
+      dy = Math.floor(canvas.height / ny);
+      if (p1) {
+        p1.offsetX = 0;
+        p1.ucanvas.width  = p1.ucanvas.clientWidth;
+        p1.ucanvas.height = p1.ucanvas.clientHeight;
+        invalidateAll(p1);
+      }
+      if (p2) {
+        p2.offsetX = nx * dx + boardGap;
+        p2.ucanvas.width  = p2.ucanvas.clientWidth;
+        p2.ucanvas.height = p2.ucanvas.clientHeight;
+        invalidateAll(p2);
+      }
+    }
+
+    function invalidateAll(p) {
+      p.invalid.court = true;
+      p.invalid.next = true;
+      p.invalid.score = true;
+      p.invalid.rows = true;
+      p.invalid.garbage = true;
     }
 
     function keydown(ev) {
       var handled = false;
-      if (playing) {
+      if (p1.playing || p2.playing) {
         switch(ev.keyCode) {
-          case KEY.LEFT:   actions.push(DIR.LEFT);  handled = true; break;
-          case KEY.RIGHT:  actions.push(DIR.RIGHT); handled = true; break;
-          case KEY.UP:     actions.push(DIR.UP);    handled = true; break;
-          case KEY.DOWN:   actions.push(DIR.DOWN);  handled = true; break;
-          case KEY.ESC:    lose();                  handled = true; break;
+          // Player 1 - WASD
+          case KEY.A:     p1.actions.push(DIR.LEFT);  handled = true; break;
+          case KEY.D:     p1.actions.push(DIR.RIGHT); handled = true; break;
+          case KEY.W:     p1.actions.push(DIR.UP);    handled = true; break;
+          case KEY.S:     p1.actions.push(DIR.DOWN);  handled = true; break;
+          // Player 2 - Arrow keys
+          case KEY.LEFT:  p2.actions.push(DIR.LEFT);  handled = true; break;
+          case KEY.RIGHT: p2.actions.push(DIR.RIGHT); handled = true; break;
+          case KEY.UP:    p2.actions.push(DIR.UP);    handled = true; break;
+          case KEY.DOWN:  p2.actions.push(DIR.DOWN);  handled = true; break;
+          // Shared
+          case KEY.ESC:   endGame('Game ended.');     handled = true; break;
         }
       }
       else if (ev.keyCode == KEY.SPACE) {
@@ -235,66 +295,97 @@
     // GAME LOGIC
     //-------------------------------------------------------------------------
 
-    function play() { hide('start'); reset();          playing = true;  }
-    function lose() { show('start'); setVisualScore(); playing = false; }
-
-    function setVisualScore(n)      { vscore = n || score; invalidateScore(); }
-    function setScore(n)            { score = n; setVisualScore(n);  }
-    function addScore(n)            { score = score + n;   }
-    function clearScore()           { setScore(0); }
-    function clearRows()            { setRows(0); }
-    function setRows(n)             { rows = n; step = Math.max(speed.min, speed.start - (speed.decrement*rows)); invalidateRows(); }
-    function addRows(n)             { setRows(rows + n); }
-    function getBlock(x,y)          { return (blocks && blocks[x] ? blocks[x][y] : null); }
-    function setBlock(x,y,type)     { blocks[x] = blocks[x] || []; blocks[x][y] = type; invalidate(); }
-    function clearBlocks()          { blocks = []; invalidate(); }
-    function clearActions()         { actions = []; }
-    function setCurrentPiece(piece) { current = piece || randomPiece(); invalidate();     }
-    function setNextPiece(piece)    { next    = piece || randomPiece(); invalidateNext(); }
-
-    function reset() {
-      dt = 0;
-      clearActions();
-      clearBlocks();
-      clearRows();
-      clearScore();
-      setCurrentPiece(next);
-      setNextPiece();
+    function play() {
+      hide('start');
+      show('restart');
+      reset(p1);
+      reset(p2);
+      p1.playing = true;
+      p2.playing = true;
+    }
+
+    function lose(p) {
+      var winner = (p === p1) ? p2 : p1;
+      endGame('Player ' + winner.id + ' wins!');
+    }
+
+    function endGame(msg) {
+      p1.playing = false;
+      p2.playing = false;
+      setVisualScore(p1);
+      setVisualScore(p2);
+      invalidateAll(p1);
+      invalidateAll(p2);
+      html('start', (msg ? msg + ' ' : '') + '<a href="javascript:play();">Press Space to play again.</a>');
+      show('start');
+      hide('restart');
+    }
+
+    function setVisualScore(p, n)      { p.vscore = (n !== undefined) ? n : p.score; invalidateScore(p); }
+    function setScore(p, n)            { p.score = n; setVisualScore(p, n);  }
+    function addScore(p, n)            { p.score = p.score + n; }
+    function clearScore(p)             { setScore(p, 0); }
+    function clearRows(p)              { setRows(p, 0); }
+    function setRows(p, n)             { p.rows = n; p.step = Math.max(speed.min, speed.start - (speed.decrement*n)); invalidateRows(p); }
+    function addRows(p, n)             { setRows(p, p.rows + n); }
+    function getBlock(p, x, y)         { return (p.blocks[x] ? p.blocks[x][y] : null); }
+    function setBlock(p, x, y, type)   { p.blocks[x] = p.blocks[x] || []; p.blocks[x][y] = type; invalidate(p); }
+    function clearBlocks(p)            { p.blocks = []; invalidate(p); }
+    function clearActions(p)           { p.actions = []; }
+    function setCurrentPiece(p, piece) { p.current = piece || randomPiece(p); invalidate(p);     }
+    function setNextPiece(p, piece)    { p.next    = piece || randomPiece(p); invalidateNext(p); }
+    function setPendingGarbage(p, n)   { p.pendingGarbage = n; invalidateGarbage(p); }
+
+    function reset(p) {
+      p.dt = 0;
+      p.pieces = [];
+      p.lastGarbageHole = -1;
+      setPendingGarbage(p, 0);
+      clearActions(p);
+      clearBlocks(p);
+      clearRows(p);
+      clearScore(p);
+      setCurrentPiece(p, randomPiece(p));
+      setNextPiece(p, randomPiece(p));
     }
 
     function update(idt) {
-      if (playing) {
-        if (vscore < score)
-          setVisualScore(vscore + 1);
-        handle(actions.shift());
-        dt = dt + idt;
-        if (dt > step) {
-          dt = dt - step;
-          drop();
-        }
+      updatePlayer(p1, idt);
+      updatePlayer(p2, idt);
+    }
+
+    function updatePlayer(p, idt) {
+      if (!p.playing) return;
+      if (p.vscore < p.score)
+        setVisualScore(p, p.vscore + 1);
+      handle(p, p.actions.shift());
+      p.dt = p.dt + idt;
+      if (p.dt > p.step) {
+        p.dt = p.dt - p.step;
+        drop(p);
       }
     }
 
-    function handle(action) {
+    function handle(p, action) {
       switch(action) {
-        case DIR.LEFT:  move(DIR.LEFT);  break;
-        case DIR.RIGHT: move(DIR.RIGHT); break;
-        case DIR.UP:    rotate();        break;
-        case DIR.DOWN:  drop();          break;
+        case DIR.LEFT:  move(p, DIR.LEFT);  break;
+        case DIR.RIGHT: move(p, DIR.RIGHT); break;
+        case DIR.UP:    rotate(p);          break;
+        case DIR.DOWN:  drop(p);            break;
       }
     }
 
-    function move(dir) {
-      var x = current.x, y = current.y;
+    function move(p, dir) {
+      var x = p.current.x, y = p.current.y;
       switch(dir) {
         case DIR.RIGHT: x = x + 1; break;
         case DIR.LEFT:  x = x - 1; break;
         case DIR.DOWN:  y = y + 1; break;
       }
-      if (unoccupied(current.type, x, y, current.dir)) {
-        current.x = x;
-        current.y = y;
-        invalidate();
+      if (unoccupied(p, p.current.type, x, y, p.current.dir)) {
+        p.current.x = x;
+        p.current.y = y;
+        invalidate(p);
         return true;
       }
       else {
@@ -302,139 +393,215 @@
       }
     }
 
-    function rotate() {
-      var newdir = (current.dir == DIR.MAX ? DIR.MIN : current.dir + 1);
-      if (unoccupied(current.type, current.x, current.y, newdir)) {
-        current.dir = newdir;
-        invalidate();
+    function rotate(p) {
+      var newdir = (p.current.dir == DIR.MAX ? DIR.MIN : p.current.dir + 1);
+      if (unoccupied(p, p.current.type, p.current.x, p.current.y, newdir)) {
+        p.current.dir = newdir;
+        invalidate(p);
       }
     }
 
-    function drop() {
-      if (!move(DIR.DOWN)) {
-        addScore(10);
-        dropPiece();
-        removeLines();
-        setCurrentPiece(next);
-        setNextPiece(randomPiece());
-        clearActions();
-        if (occupied(current.type, current.x, current.y, current.dir)) {
-          lose();
+    function drop(p) {
+      if (!move(p, DIR.DOWN)) {
+        addScore(p, 10);
+        dropPiece(p);
+        var cleared = removeLines(p);
+        sendGarbage(p, cleared);  // send to opponent if >= 2 lines
+        applyGarbage(p);          // receive any pending garbage before next piece
+        if (!p.playing) return;   // applyGarbage may have caused a topout
+        setCurrentPiece(p, p.next);
+        setNextPiece(p, randomPiece(p));
+        clearActions(p);
+        if (occupied(p, p.current.type, p.current.x, p.current.y, p.current.dir)) {
+          lose(p);
         }
       }
     }
 
-    function dropPiece() {
-      eachblock(current.type, current.x, current.y, current.dir, function(x, y) {
-        setBlock(x, y, current.type);
+    function dropPiece(p) {
+      eachblock(p.current.type, p.current.x, p.current.y, p.current.dir, function(x, y) {
+        setBlock(p, x, y, p.current.type);
       });
     }
 
-    function removeLines() {
+    function removeLines(p) {
       var x, y, complete, n = 0;
       for(y = ny ; y > 0 ; --y) {
         complete = true;
         for(x = 0 ; x < nx ; ++x) {
-          if (!getBlock(x, y))
+          if (!getBlock(p, x, y))
             complete = false;
         }
         if (complete) {
-          removeLine(y);
+          removeLine(p, y);
           y = y + 1; // recheck same line
           n++;
         }
       }
       if (n > 0) {
-        addRows(n);
-        addScore(100*Math.pow(2,n-1)); // 1: 100, 2: 200, 3: 400, 4: 800
+        addRows(p, n);
+        addScore(p, 100*Math.pow(2,n-1)); // 1: 100, 2: 200, 3: 400, 4: 800
       }
+      return n;
     }
 
-    function removeLine(n) {
+    function removeLine(p, n) {
       var x, y;
       for(y = n ; y >= 0 ; --y) {
         for(x = 0 ; x < nx ; ++x)
-          setBlock(x, y, (y == 0) ? null : getBlock(x, y-1));
+          setBlock(p, x, y, (y == 0) ? null : getBlock(p, x, y-1));
       }
     }
 
     //-------------------------------------------------------------------------
-    // RENDERING
+    // GARBAGE LINES (multiplayer attack)
+    //
+    // Clearing 2+ lines in a single drop sends garbage rows to the opponent.
+    // Garbage is queued immediately with no offset/cancelling - what you send
+    // goes straight to the opponent's queue.  At most 3 garbage rows are
+    // applied per piece drop; the rest stays queued for subsequent drops.
+    //
+    //   lines cleared    garbage sent
+    //         2                0
+    //         3                1
+    //         4 (tetris)       2
     //-------------------------------------------------------------------------
 
-    var invalid = {};
+    var maxGarbagePerDrop = 3;
 
-    function invalidate()         { invalid.court  = true; }
-    function invalidateNext()     { invalid.next   = true; }
-    function invalidateScore()    { invalid.score  = true; }
-    function invalidateRows()     { invalid.rows   = true; }
+    function garbageForLines(n) {
+      return Math.max(0, n - 2);
+    }
 
-    function draw() {
-      ctx.save();
-      ctx.lineWidth = 1;
-      ctx.translate(0.5, 0.5); // for crisp 1px black lines
-      drawCourt();
-      drawNext();
-      drawScore();
-      drawRows();
-      ctx.restore();
+    function sendGarbage(p, linesCleared) {
+      var outgoing = garbageForLines(linesCleared);
+      if (outgoing <= 0) return;
+      var opp = (p === p1) ? p2 : p1;
+      setPendingGarbage(opp, opp.pendingGarbage + outgoing);
     }
 
-    function drawCourt() {
-      if (invalid.court) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        if (playing)
-          drawPiece(ctx, current.type, current.x, current.y, current.dir);
-        var x, y, block;
-        for(y = 0 ; y < ny ; y++) {
-          for (x = 0 ; x < nx ; x++) {
-            if (block = getBlock(x,y))
-              drawBlock(ctx, x, y, block.color);
+    function applyGarbage(p) {
+      if (p.pendingGarbage <= 0) return;
+      // apply at most maxGarbagePerDrop rows; the rest stays queued
+      var n = Math.min(p.pendingGarbage, maxGarbagePerDrop);
+      setPendingGarbage(p, p.pendingGarbage - n);
+
+      var x, y;
+      // if any occupied block would be pushed above the top, the player tops out
+      for(x = 0 ; x < nx ; x++) {
+        for(y = 0 ; y < n ; y++) {
+          if (getBlock(p, x, y)) {
+            lose(p);
+            return;
           }
         }
-        ctx.strokeRect(0, 0, nx*dx - 1, ny*dy - 1); // court boundary
-        invalid.court = false;
+      }
+      // shift every column up by n rows
+      for(x = 0 ; x < nx ; x++) {
+        for(y = 0 ; y < ny - n ; y++) {
+          setBlock(p, x, y, getBlock(p, x, y + n));
+        }
+      }
+      // drop n garbage rows at the bottom, each with a single random hole
+      // ensure the first hole in this batch differs from the last batch's final hole
+      for(var g = 0 ; g < n ; g++) {
+        var hole;
+        do {
+          hole = Math.floor(random(0, nx));
+        } while (hole === p.lastGarbageHole);
+        p.lastGarbageHole = hole;
+        var row = ny - n + g;
+        for(x = 0 ; x < nx ; x++) {
+          setBlock(p, x, row, (x === hole) ? null : { color: '#777' });
+        }
       }
     }
 
-    function drawNext() {
-      if (invalid.next) {
-        var padding = (nu - next.type.size) / 2; // half-arsed attempt at centering next piece display
-        uctx.save();
-        uctx.translate(0.5, 0.5);
-        uctx.clearRect(0, 0, nu*dx, nu*dy);
-        drawPiece(uctx, next.type, padding, padding, next.dir);
-        uctx.strokeStyle = 'black';
-        uctx.strokeRect(0, 0, nu*dx - 1, nu*dy - 1);
-        uctx.restore();
-        invalid.next = false;
-      }
+    //-------------------------------------------------------------------------
+    // RENDERING
+    //-------------------------------------------------------------------------
+
+    function invalidate(p)         { p.invalid.court   = true; }
+    function invalidateNext(p)     { p.invalid.next    = true; }
+    function invalidateScore(p)    { p.invalid.score   = true; }
+    function invalidateRows(p)     { p.invalid.rows    = true; }
+    function invalidateGarbage(p)  { p.invalid.garbage = true; }
+
+    function draw() {
+      drawCourt(p1);
+      drawCourt(p2);
+      drawNext(p1);
+      drawNext(p2);
+      drawScore(p1);
+      drawScore(p2);
+      drawRows(p1);
+      drawRows(p2);
+      drawGarbage(p1);
+      drawGarbage(p2);
     }
 
-    function drawScore() {
-      if (invalid.score) {
-        html('score', ("00000" + Math.floor(vscore)).slice(-5));
-        invalid.score = false;
+    function drawCourt(p) {
+      if (!p.invalid.court) return;
+      ctx.save();
+      ctx.lineWidth = 1;
+      ctx.translate(0.5, 0.5);
+      ctx.clearRect(p.offsetX - 0.5, -0.5, nx*dx + 1, ny*dy + 1);
+      if (p.playing && p.current)
+        drawPiece(ctx, p.current.type, p.current.x, p.current.y, p.current.dir, p.offsetX);
+      var x, y, block;
+      for(y = 0 ; y < ny ; y++) {
+        for (x = 0 ; x < nx ; x++) {
+          if (block = getBlock(p, x, y))
+            drawBlock(ctx, x, y, block.color, p.offsetX);
+        }
       }
+      ctx.strokeStyle = 'black';
+      ctx.strokeRect(p.offsetX, 0, nx*dx - 1, ny*dy - 1); // court boundary
+      ctx.restore();
+      p.invalid.court = false;
     }
 
-    function drawRows() {
-      if (invalid.rows) {
-        html('rows', rows);
-        invalid.rows = false;
-      }
+    function drawNext(p) {
+      if (!p.invalid.next) return;
+      var padding = (nu - p.next.type.size) / 2; // half-arsed attempt at centering next piece display
+      p.uctx.save();
+      p.uctx.translate(0.5, 0.5);
+      p.uctx.clearRect(0, 0, nu*dx, nu*dy);
+      drawPiece(p.uctx, p.next.type, padding, padding, p.next.dir, 0);
+      p.uctx.strokeStyle = 'black';
+      p.uctx.strokeRect(0, 0, nu*dx - 1, nu*dy - 1);
+      p.uctx.restore();
+      p.invalid.next = false;
+    }
+
+    function drawScore(p) {
+      if (!p.invalid.score) return;
+      html(p.scoreId, ("00000" + Math.floor(p.vscore)).slice(-5));
+      p.invalid.score = false;
+    }
+
+    function drawRows(p) {
+      if (!p.invalid.rows) return;
+      html(p.rowsId, p.rows);
+      p.invalid.rows = false;
+    }
+
+    function drawGarbage(p) {
+      if (!p.invalid.garbage) return;
+      html(p.garbageId, p.pendingGarbage);
+      p.invalid.garbage = false;
     }
 
-    function drawPiece(ctx, type, x, y, dir) {
+    function drawPiece(ctx, type, x, y, dir, offsetX) {
       eachblock(type, x, y, dir, function(x, y) {
-        drawBlock(ctx, x, y, type.color);
+        drawBlock(ctx, x, y, type.color, offsetX);
       });
     }
 
-    function drawBlock(ctx, x, y, color) {
+    function drawBlock(ctx, x, y, color, offsetX) {
       ctx.fillStyle = color;
-      ctx.fillRect(x*dx, y*dy, dx, dy);
-      ctx.strokeRect(x*dx, y*dy, dx, dy)
+      ctx.fillRect(offsetX + x*dx, y*dy, dx, dy);
+      ctx.strokeRect(offsetX + x*dx, y*dy, dx, dy);
     }
 
     //-------------------------------------------------------------------------
